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Prefácio 


As mudanças do mundo web 


Atualmente, o JavaScript já é uma opção real e aceitável no desenvolvimento 
server-side em muitos projetos. Isso traz como uma das vantagens a possi- 
bilidade de construir uma aplicação utilizando apenas uma única linguagem, 
tanto no cliente (através do clássico JavaScript compatível em todos os brow- 
sers) como no servidor (através do íncrivel e poderoso Node.js!). 


Graças ao Node.js, diversos frameworks web surgiram — diferente das 
outras linguagens, existem mais de 30 frameworks web para Node.js! Não 
acredita? Então veja com seus próprios olhos essa lista de frameworks aces- 
sando o site: 


http://nodewebmodules.com 


Express e Meteor são os frameworks que mais se destacam, ambos são fra- 
meworks para Node.js com características únicas. O Express é considerado 
um framework minimalista, focado em criar projetos através de estruturas 
customizadas pelo desenvolvedor. Com ele é possível criar serviços REST, 
aplicações web tanto em padrão MVC (Model-View-Controller) como MVR 
(Model-View-Routes) ou totalmente sem padrão em um único arquivo, tudo 
vai depender das boas práticas aplicadas pelo desenvolvedor. Uma aplicação 
Express pode ser pequena ou de grande porte, tudo vai depender dos requi- 
sitos e, principalmente, de como vai organizar todos códigos nele, afinal com 
o Express você tem o poder de aplicar suas próprias convenções e organiza- 
ções de código. Outro detalhe é que você utiliza seu próprio framework de 
persistência de dados, então todo controle fica em suas mãos. 


A princípio, se você possui um bom conhecimento sobre o Express e os 
demais frameworks necessários para construir sua aplicação, então você terá 
velocidade suficiente para desenvolver uma aplicação de forma ágil. Mas e 
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se existisse um framework Node.js, cujo foco é prototipar telas em extrema 
velocidade? Tudo isso utilizando componentes prontos que são facilmente 
customizáveis e com configurações complexas simplificadas alto nível para 
você utilizar (aplicando os princípios de convenção sobre configuração). No 
mundo Ruby, isso deu certo através do inovador framework Rails; agora te- 
mos uma inovação semelhante no mundo Node.js, essa inovação se chama 
Meteor. 


A quem se destina este livro? 


Esse livro é destinado aos desenvolvedores que tenham pelo menos co- 
nhecimentos básicos de Node.js, Javascript e arquitetura web cliente-servidor. 
Ter domínio desses conceitos, mesmo que a nível básico, será necessário para 


que a leitura seja de fácil entendimento. 


Como devo estudar? 


Este livro é praticamente um hands-on que visa ensinar os principais con- 
ceitos do Meteor através da construção de uma aplicação web do zero. Ao de- 
correr da leitura serão apresentados diversos conceitos e muito código para 
implementar no projeto, aplicar na prática os conceitos teóricos e aprender 


boas práticas e convenções desta tecnologia. 
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CAPITULO 1 


Introdução 


1.1 CONHECENDO SEU MUNDO 


O Meteor é um framework web full-stack 100% JavaScript, ou seja, com ele 
você vai construir aplicações programando em todas as camadas: cliente, ser- 
vidor e banco de dados, usando JavaScript, Node.js e MongoDB, tudo isso 
utilizando apenas uma única linguagem de programação, o JavaScript. 
Outro detalhe importante é que o foco desse framework é a prototipagem 
rápida, fazendo com que trabalhos que levariam meses sejam realizados em 
semanas, ou até mesmo alguns dias. Isso é possível graças aos seus recursos 
que visam automatizar tarefas repetitivas, exibir respostas imediatas no brow- 
ser, diversas convenções, vários componentes customizáveis prontos para uso 
e também as configurações complexas de baixo nível que estão simplifica- 
das para o desenvolvedor. Por default, suas aplicações Meteor serão em for- 
mato single-page real-time, mas também é possível criar aplicações multi-page 
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orientado a rotas. Este framework é considerado como um MVVM (Model- 
View View-Model), ou seja, não existe controllers ou routes por default, mas é 
customiza-lo com o propósito de adicionar controllers, routes e outros patterns 
através da inclusão packages third-party. 

O Meteor é uma plataforma de desenvolvimento completa, sendo que o 
mecanismo principal responsável por toda magia back-end é o Node.js. As- 
sim como o Node.js possui seu gerenciador de módulos — o NPM (Node 
Package Manager), o Meteor possui o seu próprio gerenciador de packages 
(sim, módulos e packages são a mesma coisa, ou seja, são frameworks), que 
se chama Atmosphere. Este permite usar projetos third-party criados pela co- 
munidade, sem contar que também é possível utilizar a maioria — mas não 
todos — dos módulos NPM dentro de uma aplicação Meteor (algo que será 
explicado nos capítulos futuros). Isso pode evitar a “invenção da roda”, po- 
rém tudo vai depender da compatibilidade de tal módulo Node no contexto 
do Meteor. 

Trabalhar com Meteor é trabalhar com JavaScript, e isso faz com que mui- 
tos desenvolvedores tenham uma curva de aprendizado rápida, e em poucos 
dias de estudos você terá dominado os principais pontos e aspectos deste fra- 
mework. Se você não conhece Node.js mas domina JavaScript, não tenha re- 
ceio de ler esse livro, pois poucas coisas sobre Node.js serão abordadas aqui. 

Este é um framework de muitos recursos, ou seja, constituído por um 
conjunto de frameworks do mundo Node.js e JavaScript. Algumas bibliotecas 
conhecidas que fazem parte dele são: 


e SockJS — framework emulador de WebSockets e responsável pelo fun- 
cionamento do protocolo DDP (Data Distribution Protocol). 


e MongoDB — banco de dados default. 
e Handlebars — template engine. 


e PubSub — biblioteca de emissão e escuta de eventos via pattern: pu- 
blisher / subscriber. 


* MiniMongo — API client-side que possui a maioria das funcionalidades 
do MongoDB. 
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e Connect — módulo Node.js com funcionalidades para trabalhar com 
protocolo HTTP. 


Esses são alguns frameworks internos que são essenciais para dar vida ao 
Meteor. 


1.2 Os7 PRINCÍPIOS DO METEOR 


O Meteor é um framework totalmente inovador, ele engloba diversas boas 
práticas de frameworks como Rails do Ruby, Django do Python, Express do 
Node.js, além da própria equipe adotar suas próprias convenções. Tudo isso 
surgiu baseado em 7 princípios, e eles são: 


1 Data on the wire 


eoo Handlebars js: Minimal Te x 
e> C handlebarsjs.com ARVO 2 


Handlebars provides the power necessary to let you build semantic templates 
effectively with no frustration. 


Mustache templates are compatible with Handlebars, so you can take a Mustache 
template, import it into Handlebars, and start taking advantage of the extra Handlebars 


features. 





Figura 1.1: Handlebars é o template engine do Meteor. 


Nao envie HTML pela rede e sim apenas dados, deixando que o cliente 
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decida como apresentá-los. 


2 One language 


nO gl CaO 0 mongoDB 


Figura 1.2: Node.js, Javascript e MongoDB. 


Escreva código JavaScript em todas as camadas: cliente, servidor e banco 
de dados. Isso simplifica e agiliza o desenvolvimento, além de garantir uma 
curva de aprendizado baixa. 


3 Database anywhere 


E-2-B 
RY dé 


Figura 1.3: Banco de dados compartilhado entre cliente e servidor. 


Utilize uma API de interface única e transparente que lhe permite acessar 
o banco de dados tanto no cliente como no servidor. 
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4 Latency compensation 


Prefetching e Model Simulation 


Figura 1.4: Latência zero ao acessar dados via cliente. 


No cliente é usado prefetching e model simulation na API client-side do 
banco de dados para atingir latência zero no acesso de seus recursos. 


5 Full-Stack Reactivity 


Event-Driven 
+ 


Reactivity 


Real-time 





Figura 1.5: Meteor é um framework full-stack real-time. 


Por default tudo funciona em real-time. E todas as camadas da aplicação 
adotam o paradigma orientado a eventos, que é herdado do Node.js. 


1.2. Os 7 principios do Meteor Casa do Cédigo 





6 Embrace the ecosystem 





open source 
initiative 


mmriariAc 


Figura 1.6: Meteor é mais uma iniciativa open-source. 


Totalmente open-source, o Meteor possui suas convenções pelas quais 
agrega novos conceitos e valores, em vez de ser uma ferramenta que subs- 
tituirá outros frameworks. 
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7 Simplicity equals Productivity 





Figura 1.7: Aumente sua produtividade trabalhando com Meteor! 


Seja produtivo! Desenvolva de mais features de forma rápida e simpli- 
ficada. O Meteor mantém um conjunto de APIs fáceis de implementar e a 
comunidade Meteor está sempre colaborando para evolução do framework. 


CAPITULO 2 


Configurando o ambiente de 
desenvolvimento 


2.1 DETALHES SOBRE A INSTALAÇÃO 


Para instalar o Meteor, primeiro temos que ter o Node.js e MongoDB instala- 
dos. Nesta seção explicarei como instalar e configurar o ambiente de desen- 
volvimento de cada dependência do Meteor. 


2.2 NODE.JS 


Instalação 


Para configurar o ambiente Node.js, independente de qual sistema operaci- 
onal você utilizar, as dicas serão as mesmas. É claro que os procedimentos 
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serão diferentes para cada sistema (principalmente para o Windows, mas não 
será nada grave). 


K] node.js | + 


nodejs.org download e | (BE Googie a 


© Disable + QZ Cookies + Jë CSS + By Forms + E images + f information + @ Miscellaneous + / Outline + # Resize + # Tools + €> View Source + 





Download the Node.js source code or a pre-built installer for your platform, and star 
developing today. 


Current version: v0.10.26 


a é % 





























Windows Installer Macintosh Installer Source Code 
Windows Installer (.msi) 32-bit 64-bit 
Windows Binary (exe) 32-bit 64-bit 
Mac OS X Installer (pkg) Universal 
Mac OS X Binaries (.tar.gz) 32-bit 64-bit 
Linux Binaries (.tar.gz) 32-bit 64-bit 
‘SunOS Binaries (tar.gz) 32-bit 64-bit 
Source Code 1 node~v0.10.26.tar.gz 


Note: Python 2.6 or 2.7 is required to build from source tarballs. 


Figura 2.1: Pagina de Download do Node.js. 


Instalando Node.js: primeiro passo, acesse o site oficial: (http://nodejs. 
org) e clique em Download. Para usuários do Windows e MacOSX, basta 
baixar os seus instaladores e executá-los normalmente. Para quem já utiliza 
Linux com Package Manager instalado, acesse esse link (https://github.com/ 
joyent/node/wiki/Installing-Node.js-via- package- manager) , que é referente 
às instruções sobre como instalá-lo em diferentes sistemas. Instale o Node.js 
de acordo com seu sistema e, caso não ocorra problemas, basta abrir o seu 
terminal console ou prompt de comando e digitar o comando: node -v 
&& npm -v para ver as respectivas versões do Node.js e NPM (Node Package 
Manager) que foram instaladas. 
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e008 C meteor — bash — 77x20 ry 
| bash bash 











Figura 2.2: Versão do Node.js e NPM utilizada neste livro. 


A última versão estável utilizada neste livro é Node 0.10.26, junto do 
NPM 1.4.3. 





A IMPORTÂNCIA DE INSTALAR VERSÕES RECENTES DO NODE.JS 


É altamente recomendável utilizar uma versão igual ou superior 
à VO.10.22, pois recentemente foram identificadas algumas vulnerabi- 
lidades que permitiam ataque DoS via HTTP em versões anteriores. 
Veja mais detalhes no blog oficial: http://blog.nodejs.org/2013/10/22/ 
cve-2013-4450-http-server-pipeline-flood-dos 











Configuração do ambiente 


Para configurá-lo, basta adicionar uma variável de ambiente, o 





NODE_ENV com valor “development”. Em sistemas Linux ou OSX, basta aces- 











sar o arquivo .bash profile ou .bashrc com um editor de texto qual- 


quer, em modo super user (sudo), e adicionar o seguinte comando: export 





NODE_ENV=’ development”. 











No Windows 7, o processo é um pouco diferente. 
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Ow [Hã > Painel de Controle » Sistema e Segurança » Sistema = [+ || Pesquisar Painel de Controle P 








Pr i x | trai. 5 = 
Página Inicial do Painel de DEPRESS L Variáveis de Ambiente 


Controle [ = 
m Hardware | - : 
Avançad Proteção do Sist Remot F M ] 
(9 Gerenciador de Dispositivos oe Proteção do Sistema Remoto |Nova Variável de Sistema 8 | 


Para tirar o maximo proveito destas alterações, é preciso ter feto logon como 




















È Configurações remotas rriren E Eee 
{J Proteção do sistema Desempenho 
Efe 3 di de A ó Ve ável: 
eoar avançadas do Eetos visuals agendamento de processador, uso de meméia e alor da variável 
sistema ee | 
| Configurações... | 


Perfis de Usuário 


Configurações da área de trabalho relativas ao seu logon Variáveis do sistema 











—— Variável Valor = 
| Configurações. | Comspec C:\Windows \system32\emd.exe E 
FP.NO HOST. C... NO 
Inicialização e Recuperação NUMBER OF P.. 1 
Informações sobre inicialização do sistema, falha do sistema e os Windows NT ema 
depuração 3 
—— 4 
rl (lee) ee...) Cee) 
m pda rr 
| Variáveis de Ambiente... | ok ][ cancelar ] 
Central de Ações Configurações 
Windows Update 
Informações e Ferramentas de OK | || Cancelar 


Desempenho 











Figura 2.3: Configurando a variável NODE_ENV no Windows 7. 


Clique com botão direito no ícone Meu Computador e selecione 
a opção Propriedades. No lado esquerdo da janela, clique no link 
Configurações avançadas do sistema. Na janela seguinte, acesse a 





aba Avançado e clique no botão Variáveis de Ambiente...; agora 
no campo Variáveis do sistema clique no botão Novo.. ., em “nome 
da variável” digite NODI 
Após finalizar essa tarefa, reinicie seu computador para carregar essa variável 


LT] 











_ENV e em valor da variável” digite development. 


no sistema operacional. 


Rodando o Node.js 


Para testarmos o ambiente, executaremos o nosso primeiro programa 
Hello World. Execute o comando: node para acessarmos seu modo REPL 
(Read-Eval-Print-Loop), que permite executar código JavaScript diretamente 











no terminal. Digite console. log("Hello World"); e tecle ENTER para 





executá-lo na hora. 
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eoo |) nodejs — node — 82x23 é 
bash bash node bash 

















Figura 2.4: Hello World via REPL do Node.js 


2.3 MoncoDB 


Instalação 


Com Node.js funcionando, falta instalar mais uma dependência importante 
do Meteor, o MongoDB. Não há segredos para instalá-lo, tanto é que utilizare- 
mos suas configurações padrões de ambiente development. Vamos lá! Acesse 
este link: http://www.mongodb.org/downloads e faça o download do Mon- 
goDB compatível com seu sistema operacional. 


13 


2.3. MongoDB Casa do Código 





mongoDB 





MongoDB Downloads 


ets Morqo08 disvioutions Dy plato and VION We secommend using these binary demibsions. but Term arm also DIONIS avaiable ‘or warous packago managers 
Production Release (2.4.8) 


Windows 


[o 


Download O 





windows Linux Mac OSX Solaris 


2.4.0-100 


Figura 2.5: Pagina de download do MongoDB. 


Neste livro, utilizaremos sua última versão estável: 2.4.8. O MongoDB 
será instalado via HomeBrew (http://mxcl.github.com/homebrew) , que é um 
gerenciador de pacotes para Mac. Para instalá-lo execute os comandos a se- 
guir: 


brew update 
brew install mongodb 


Se você estiver no Linux Ubuntu, terá um pouco mais de trabalho, porém 
é possível instalá-lo via comando apt-get. Primeiro em modo sudo (super 
usuário), edite o arquivo /etc/apt/sources.list.d/mongodb. list, 
adicionando no final do arquivo o comando: 


deb http://downloads-distro.mongodb.org/repo/ubuntu-upstart 
dist 10gen 


Salve-o e execute os próximos comandos: 


sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 
--recv 7FOCEB10 
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sudo apt-get update 
sudo apt-get install mongodb-10gen 


Já no Windows, o processo é tão mais trabalhoso que nem apresentarei 
neste livro...brincadeira! Instalar no Windows também é fácil, apenas baixe 
o MongoDB, crie as pastas C: Ndataldb e C:\mongodb, e descompacte o 
conteúdo do arquivo zip do MongoDB dentro de C: \mongodb. 





SISTEMA OPERACIONAL UTILIZADO NESTE LIVRO 


Todos os frameworks apresentados neste livro serão trabalhados em 
um sistema MacOSX da Apple, mas sinta-se à vontade para trabalhar em 
outros sistemas como Linux ou Unix. Somente no Windows você sofrerá 
alguns problemas mas, ainda neste ano de 2014, será lançada uma versão 
com várias otimizações que irão compatibilizar com Windows. 











Configuração do ambiente 


Para executar o MongoDB, precisamos configurá-lo como serviço no sis- 
tema. Para isso, abra o terminal ou prompt de comando e siga as instruções a 
seguir de acordo com seu sistema operacional: 


e MacOSX: já vem configurado como serviço através do homebrew. 
* Linux Ubuntu: já vem configurado como serviço através do apt-get. 


e Windows: acesse esse link http://docs.mongodb.org/manual/tutorial/ 
install-mongodb-on-windows e siga passo a passo para configurá-lo 
corretamente no Windows, pois há variações de configuração entre 
uma versão 32bits e 64bits do Windows. 


Rodando o MongoDB 


Agora que temos o MongoDB configurado, podemos usar seus comandos 
no terminal. 


Para acessar seu CLI, execute o comando: mongo 


15 


2.4. Instalando o Meteor Casa do Código 





O MongoDB cria databases de forma dinâmica, ou seja, ao usar o co- 
mando use nome do database, automaticamente ele cria um novo ou 
acessa um existente database. O mesmo conceito é aplicado em suas collecti- 
ons e atributos de suas collections. 


Faça o teste você mesmo! Execute essa sequência de comandos: 


use db test; 

db.users. insert (fnome: "MongoDB", version: "2.4.8"}); 
db.users. insert (fnome: "CouchDB", version: "1.5.0"}); 
db.users. insert (fnome: "LevelDB", version: "1.1"}); 
db.users. insert (fnome: "MariaDB", version: "10.0.7"}); 
db.users.find(); 


2.4 [INSTALANDO O METEOR 


Agora vamos ao que interessa! Instalar e configurar o Meteor em sua má- 
quina. A versão do Meteor usada neste livro é a 0.8.0. 


Instalação em ambiente Mac/Unix/Linux 


Instalar o Meteor é super simples, apenas execute: 


curl https://install.meteor.com | /bin/sh 


Instalação em ambiente Windows 


Somente no Windows existem algumas barreiras para instalar o Meteor, 
mas tudo isso será resolvido na futura versão 1.0.0. Enquanto isso, reco- 
mendo que você instale uma máquina virtual rodando Linux e siga as ins- 


truções de instalação anterior para prosseguir no livro. 
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Figura 2.6: Versão do Meteor usada neste livro 


2.5 RODANDO O METEOR 


Que tal criarmos nosso app de teste? Para mostrar o quão fácil é fazer esta 
magia, apenas execute esses 3 comandos: 


meteor create meu-app-teste 
cd meu-app-teste 
meteor 


Por default, o Meteor cria um aplicativo de “Hello World” sem a ne- 
cessidade de você codificá-lo. Seu comando scaffold gerou 3 arquivos (1 
html, 1 css e 1 js) com o mesmo nome meu-app-teste. O arquivo 
meu-app-teste.html veio com o seguinte código: 


<head> 
<title>meu-app-teste</title> 
</head> 


<body> 


{{> hello}} 
</body> 
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<template name="hello"> 

<hi>Hello World!</h1> 

{{greeting}} 

<input type="button" value="Click" /> 
</template> 





Repare na tag <template name="hello">: é uma tag especial do 
Handlebars, cujo conteudo é dinamicamente injetado dentro da tag <body> 
através da marcação ((> hello}}. Caso você exclua essa marcação, o tem- 
plate não será renderizado. Quer fazer um teste? Primeiro acesse em seu 
browser o endereço http://localhost:3000. Agora exclua a marcação ((> 
hello}}. Repare que, instantaneamente, o Meteor atualizou o HTML no 
browser, afinal ele possui o mecanismo muito produtivo, conhecido pelo 
nome de Hot-Pushes. Ele faz auto-reload no navegador ao alterar qualquer 
código do projeto. Ao trabalhar com CSS, você na hora realiza as mudan- 
ças do layout, como por exemplo, edite o meu-app-teste.css inserindo 
o conteúdo a seguir: 


body { 
margin: O auto; 
text-align: center; 


} 
hi { 
font-size: 4em; 


} 


Para finalizar, temos também o meu-app-teste.js, um código que 
utiliza funções de cliente e servidor. Nele colocamos códigos a serem execu- 
tado no cliente dentro da condicional Meteor. isClient,eo que tiver que 
ser executado no servidor colocamos dentro de Meteor.isServer. Um 
detalhe importante é que todos os códigos que estiverem fora dessas duas 
condicionais serão carregados em ambas camadas. Por default, Meteor gerou 
o seguinte código JavaScript: 


if (Meteor.isClient) { 
Template.hello.greeting = function () { 
return "Welcome to meu-app-teste."; 
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+; 


Template .hello.events(1 
“click input’ : function () { 
// template data, if any, is available in ’this’ 
if (typeof console !== ’undefined’) 
console.log("You pressed the button"); 


H; 
} 


if (Meteor.isServer) { 
Meteor.startup(function () { 
// code to run on server at startup 
Hj 
F 


Dentro de Meteor.isClient temos uma declaração da função 
Template.hello.greeting, referente ao {{greeting}} que está 





dentro da tag <template name="hello">. Esta é uma das convenções 
do Meteor em que você deve declarar funções para templates utilizando 





a convenção Template.nome_do_template.nome_da_marcação. 
Outro código importante no cliente foi a criação de eventos para 
o mesmo template. Você sempre trabalhará com eventos de 
forma imperativa no Meteor, semelhante ao framework Backbone 
(http://backbonejs.org) . Para criar um evento, basta seguir a conven- 





ção Template.nome_do_template.events e declarar um hash de 
eventos, cuja chave é uma string referente ao “evento seletor” e o valor é uma 
função JavaScript. 

Em Meteor. isServer, temos a função principal de startup do projeto, 
o Meteor. startup, cujo callback não possui código. Essa função também 
possui o mesmo comportamento ao ser declarada no lado do cliente. Vamos 
vero Meteor.startup em ação? Edite o meu-app-teste. js e faça as 
seguintes alterações: 


if (Meteor.isClient) { 
Meteor.startup(function () { 
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alert ("Iniciando Cliente Meteor."); 


H); 


Template.hello.greeting = function () { 
return "Welcome to meu-app-teste."; 


+; 


Template.hello.events({ 
?click input’ : function O) { 
// template data, if any, is available in ’this’ 
if (typeof console !== ’undefined’) 
console.log("You pressed the button"); 


H); 
} 


if (Meteor.isServer) { 

Meteor.startup(function () { 
console.log("Iniciando Servidor Meteor."); 

H); 

} 


E viu as novas mensagens geradas no servidor e cliente? Se não funcionou, 
atualize seu browser. 

De qualquer forma, temos um grande problema ao trabalhar com 
essa estrutura gerada pelo Meteor. Dificilmente um projeto grande so- 
breviveria mantendo todo seu core dentro de um único arquivo .js, 
mesmo utilizando inúmeras vezes as variáveis globais Meteor.isClient 
e Meteor.isServer. Com o crescimento do projeto, é extremamente im- 
portante manter organizada e escalável sua estrutura de pastas e códigos. Mas 
fique tranquilo, no próximo capítulo este mistério será desvendado! 


2.6 FAZENDO DEPLOY PARA TESTES 


Se você é um desenvolvedor que curte publicar com frequência novos up- 
dates da aplicação em um ambiente beta ou staging, o Meteor disponibiliza 
gratuitamente uma máquina nas nuvens para fazer deploy em subdominio do 
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aplicacao.meteor.com. Esta é uma máquina com configuração fraca, 
usada apenas para testar sua aplicação ou para publicar sistemas de pequeno 
porte. Ela já vem com Node.js, MongoDB e, principalmente, o Meteor. Nos 
capítulos futuros falarei em mais detalhes sobre deploying em ambientes de 
produção, mas por enquanto explicarei apenas como fazer no meteor. com. 
Siga os comandos: 


meteor deploy meu-app-teste --password=senhai23 


Obs.: Caso você não consiga fazer deploy com o nome: 
meu-app-teste, tente um outro nome qualquer, pois provavelmente 
o primeiro leitor deste livro já rodou este comando e conseguiu registrar-se 
com esse nome. 

Também é permitido, neste ambiente, fazer redirecionamento de DNS 
para o seu próprio domínio. Para isso, apenas configure seu serviço DNS 





apontando um CNAME para origin.meteor. com. Em seguida, faça o de- 
ploy do seu projeto utilizando o seu domínio: 


meteor deploy www.meuapp.com --password=senha123 


2.7 GERENCIANDO PACKAGES COM METEORITE 


Como adicional, instalaremos o Meteorite, afinal no decorrer deste livro uti- 
lizaremos packages third-party que são hospedados no Atmosphere. Não uti- 
lizaremos o comando meteor esim o mrt do Meteorite que além de possuir 
seus comandos específicos também executa todos os comandos do Meteor. 


Como funciona o Meteorite? 


O Meteorite possui um comportamento muito parecido com o Gems do 
Ruby e o NPM do Node.js. As instalações dos pacotes são gerenciadas através 
do arquivo smart . json, que é criado na raiz do projeto. Também é criado 
o smart . lock, responsável por manter informações sobre as atuais versões 
de cada dependência do seu projeto, bem como a versão atual do Meteor. Ao 
apagar esse arquivo, você força o Meteorite a reinstalar tudo (dependências e 
a última versão do Meteor), quando você executar, na próxima vez, um desses 


comandos: mrt, mrt installou mrt update. 
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Como receita de bolo, veja a seguir os principais comandos do Meteorite: 


e mrt — é um alias do comando meteor; sua única diferença é que, antes 
de iniciar o servidor, ele instala ou atualiza todas as dependências do 
projeto. 





e mrt create nome-do-app — é também um alias do comando me- 
teor create, cujo diferencial é que ele cria o arquivo smart. json, O 
qual explicarei no final deste capítulo. 


e mrt add nome-do-package — é um alias do comando meteor add; 
sua diferença é que ele instala os pacotes através do Atmosphere. Ele 
também cria e mantém atualizado o arquivo smart . json, que se en- 
contra no diretório raiz do projeto. 


e mrt add nome-do-package --version 0.0.1 — instala um 


pacote de uma específica versão. 


e mrt install — instala todos pacotes que estão listado no 


smart. json. 





e mrt update — atualiza a versão do meteor e de todos os pacotes do 
projeto. 


O arquivo smart. json, além de manter os packages dependentes do 


projeto, também é um descritor do próprio projeto, o qual ele considera como 


um package. Veja a seguir a estrutura básica de um arquivo smart. json: 


{ 
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"name": "nome-do-projeto", 


"description": "Descrição do projeto", 


"author": "Usuário <usuario@mail.com>", 


"version": "0.0.1", 


"packages": { 


} 


"nome-do-package-1": {}, 
"nome-do-package-2": {} 


CAPITULO 3 


Criando uma rede social 
real-time 


3.1 PROJETO PILOTO: METEORBIRD 


Agora que temos o ambiente Meteor instalado e funcionando corretamente, 
vamos criar nosso projeto piloto, com o qual, no decorrer deste livro, explo- 
raremos os principais recursos do Meteor, bem como explicaremos diversos 
tópicos e conceitos. O projeto que vamos criar será um rede social, uma ver- 
são simplificada do Twitter (http://twitter.com) , que chamaremos de Mete- 
orBird. 


3.2 FUNCIONALIDADES DA APLICAÇÃO 


Neste projeto, implementaremos as seguintes features: 


3.3. Criando o projeto Casa do Código 





e Atualizações da timeline em real-time; 
e Sign-up através de e-mail e senha; 
* Sign-up através de uma conta no Facebook; 


* Acessar perfil de um usuário; 


Follow e unfollow de posts de um usuário; 





SOBRE O CÓDIGO-FONTE DESTE PROJETO 


Caso queira fazer um test-drive antes, para rodá-lo em sua máquina 
vendo na prática como funciona, faça o download o código-fonte através 
do meu github pessoal: 

https://github.com/caio-ribeiro-pereira/meteor-bird 











3.3 CRIANDO O PROJETO 


Nesta seção vamos criar a estrutura desse projeto, isto é, como a estrutura do 
Meteor é flexível em relação aos diretórios chaves, listarei na sequência quais 
diretórios serão utilizados e explorados no decorrer deste livro. 

Antes de começarmos isso, primeiro vamos criar o projeto. Execute os 
comandos a seguir para criar o projeto e excluir os arquivos gerados: 


mrt create meteor-bird 
cd meteor-bird 
rm meteor-bird.* 


Agora crie os seguintes diretórios, os quais exploraremos nos capítulos 
seguintes: 


e client — diretório de códigos client-side; 
* server — diretório de códigos server-side; 


e models — diretório de modelos compartilhados entre cliente e servi- 
dor, eles são as collections do MongoDB; 
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e public/resources — diretório para incluir arquivos estáticos (utilizare- 


mos para servir imagens); 


e test — diretório para rodar testes na aplicação. 


É claro que no decorrer do caminho criaremos alguns subdiretórios, mas 
com essa estrutura inicial será mais fácil seguir este livro com uma noção 
básica sobre as convenções de cada um desses diretórios. 

Antes de começar o projeto, utilizaremos o Twitter Bootstrap 3 (http: 
//getbootstrap.com) como framework CSS para nos auxiliar no desenvolvi- 
mento das interface da aplicação. O mais bacana é que o Meteor já possui um 
package chamado boot st rap-3 pronto para uso, e para instalá-lo basta ro- 
dar o seguinte comando: 


mrt add bootstrap-3 


Agora que adicionamos nosso primeiro package, surgiu o arquivo 
smart. json na raíz do projeto. Para deixá-lo mais descritivo, vamos adi- 
cionar algumas informações sobre o projeto Meteor Bird. Para isso, edite esse 
arquivo com base no seguinte conteúdo: 


{ 
"name": "meteor-bird", 
"description": "Meteor Bird Social Network", 
"author": "Caio R. Pereira <caio.ribeiro.pereira@gmail.com>", 
"version": "0.0.1", 
"packages": { 
"bootstrap-3": {} 
} 


Obs.: Mude o nome do campo author para o seu nome e e-mail. 

Também criaremos um simples arquivo css que irá definir uma cor 
de plano de fundo tamanho real do container da aplicação. Crie o arquivo 
client/stylesheets/application.css, inclua e estilize os elementos 


a seguir: 
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body { 
background-color: #EFEFEF ; 
} 
.container { 
background-color: #FFF; 
width: 780px; 


Com isso ja temos uma conjunto de estilos para construir paginas bonitas 
e amigáveis na aplicação. 

Não pare de ler este livro! No próximo capítulo botaremos as mãos na 
massa! 
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Implementando uma timeline de 
posts 


4.1 ESTRUTURANDO OS TEMPLATES 


Começando o desenvolvimento da nossa rede social, vamos criar os prin- 
cipais templates da aplicação: cabeçalho e rodapé. Todos os templa- 
tes serão criados na pasta client/views, mas somente o template 
principal fica dentro da pasta client e ele deve ser chamado de 
client /index.html. Vamos começar criando o cabeçalho da página no 
template client /views/header.html: 





<template name="header"> 
<header class="container"> 
<nav class="navbar navbar-default"> 


4.1. Estruturando os templates Casa do Código 





<div class="navbar-header"> 
<a class="navbar-brand">Meteor Bird</a> 
</div> 
</nav> 
</header> 
</template> 


Em seguida, vamos criar o rodapé em client/views/footer.html: 


<template name="footer"> 

<footer class="container"> 
<hr> 
<p class="text-center"> 
<small>Meteor Bird</small> 
</p> 

</footer> 

</template> 


Com base nesses dois templates, já montamos a estrutura básica do layout. 
Que tal testar? Levante o servidor Meteor rodando o comando mrt e acesse 
http://localhost:3000 para ver os resultados. 
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Figura 4.1: Por que a página está em branco? 


Mas o que houve? Por que não apareceu nada? Cadê o cabeçalho e ro- 
dapé? Calma! Esqueci de explicar um pequeno detalhe: por default, o HTML 
não renderiza a tag <template> e quem trabalha com todo conteúdo dos 
template no Meteor é o Handlebars. Ele o Template Engine responsável por 
injetar o conteúdo de um template dentro do HTML principal (além de ter 
outras funcionalidades focadas em manipular conteúdo dinâmico em uma 
página HTML). 

O Meteor abstrai todo código JavaScript referente às funções do Handle- 
bars além de outras funções de manipulação de views através do recente fra- 
mework introduzido na versão 0.8.x, chamado Blaze. 

https://github.com/meteor/meteor/wiki/Using-Blaze 

Graças ao Blaze você não vai precisar compilar um template e chamar fun- 


ções complexas para renderizá-lo, você apenas vai criar os template no projeto 





e chamá-lo onde quiser através da marcação {{> nome do template)). 
Incluir um template dentro do HTML principal é muito simples, veja como 
incluiremos o cabeçalho e rodapé editando o client /index.html: 
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<head> 

<title>Meteor Bird</title> 
</head> 

<body> 

{{> header}} 

{{> footer}} 

</body> 


Meteor Bird + 
localhost:300' e | (E~ Google Q 


© Disable + Q Cookies + 7: CSS ~ Mi Forms » E Images + f Information ~ @ Miscellaneous + f° Outline + # Resize v É” Tools + 


Meteor Bird 


Meteor Bird - Este é um projeto exemplo utilizado como didática no livro: Livro de Meteor 


Figura 4.2: Cabeçalho e rodapé na página principal 


4.2 CRIANDO O TEMPLATE DA TIMELINE 


Nesta seção, vamos criar a timeline de posts, que será a primeira feature do 
projeto. A timeline deve mostrar posts do próprio usuário e principalmente 
posts de seus seguidores, porém focaremos no momento em apenas exibir 
os posts do próprio usuário. Faremos esta implementação em duas etapas, a 
primeira será somente uma renderização simples da timeline com dados fa- 
kes, para prototipar seu layout. No decorrer dos capítulos, implementaremos 
o código final dessa funcionalidade. 
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Crie o diretório client /1lib/helpers. Este será um diretório de hel- 
pers, através do qual criaremos funções com regras de negócio focadas em 
apresentar algo na view do cliente. Nele, podemos utilizar funções das col- 
lections, outras estruturas de dados ou até mesmo bibliotecas externas. O 
objetivo de um helper no Meteor é de criar funções que retornem resultados 
apresentáveis nas views. 


Vamos criar nossa timeline fake? Dentro de client /lib/helpers, 





crie o arquivo timeline. js, com o seguinte código: 


Template.timeline.helpers({ 
posts: function() { 
return [ 
{message: "Ola!"}, 
{message: "tudo bem?"} 


1s 


H; 


Agora, para alcançar o resultado, temos que criar o template da timeline. 
Crie a view client/views/home/timeline.html com o template a se- 
guir: 


<template name="timeline"> 
<div class="row"> 
<fieldset class="col-sm-12"> 
<legend>últimos posts</legend> 
{{#each posts}} 
<blockquote class="lead"> 
<small>{{message}}</small1> 
</blockquote> 
<hr> 
{felse}} 
<p class="lead text-center"> 
Nenhum post publicado. 
</p> 
{{/each}} 
</fieldset> 
</div> 
</template> 
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Repare nas convenções de namespace do Meteor. Criamos 
o helper timeline.js, cujo código segue com o namespace 
Template.timeline.helpers. Ele permite registrar funções hel- 








pers para o template timeline. Criamos uma função chamada posts, 
cujo objetivo é retornar um array de objetos referentes aos dados de um 
post. Apenas seguindo as convenções de nomes já estamos aptos a criar 
um template que renderize essa função helper. Basta apenas criar a tag 





<template name="timeline"> e, internamente, utilizar sintaxe do 
Handlebars que permite rodar um loop do array retornado pelo helper 
posts, utilizando a marcação ((feach posts}}. 

Se você deixou seu servidor Meteor rodando, repare que nada aconte- 
ceu no browser. Isso ocorre porque não adicionamos esse template na view ( 
client /index.html), então adicione o seguinte conteúdo: 


<head> 
<title>Meteor Bird</title> 
</head> 
<body> 
{{> header) 
<main class="container"> 
<section class="col-sm-12"> 
{{> timeline}} 
</section> 
</main> 
{{> footer}} 
</body> 


Agora acesse novamente o browser, ou, se ocorrer algum problema, rei- 
nicie o servidor teclando no terminal CTRL+C (no Linux ou Windows) ou 
Control1+c (no MacOSX). Em seguida, execute o comando mrt e veja o 
resultado: 
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Meteor Bird 
últimos posts 


ola! 
Muito legal esse Meteor Bird!! 


Tudo bem galera? 


Meteor Bird - Este é um projeto exemplo utilizado como didática no livro: Livro de Meteor 


Figura 4.3: Timeline estática. 


4.3 PUBLICANDO POSTS NA TIMELINE 


Essa timeline esta estatica, que tal criarmos uma caixa de texto permitindo 
que o usuário publique seus próprios posts? Para isso, utilizaremos um re- 
curso do Meteor, que se chama Session. 

Diferente das sessions convencionais de outras linguagens, uma 
Session do Meteor não armazena dados na memória do servidor, e sim no 
cliente. Isso faz com que um simples refresh no browser limpe todos os dados 
do cliente. Outro detalhe importante é que a Session utiliza internamente 
o pattern reactive, o principal pattern utilizado em muitas classes nativas do 
Meteor. Sua utilidade é fazer re-computation, ou seja, um objeto que adota 
esse pattern tem a proatividade de reexecutar suas funções de saída toda vez 
que o estado de seus atributos sofrer alterações. 

Por exemplo, o próprio objeto Session possui a função de saída 


get (chave), e como entrada, ele possui a função set (chave, valor). 
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Todos os pontos da aplicação em que você utilizar Session.get ("X") se- 
rao reexecutados toda vez que um outro ponto da aplicação alterar o valor de 
"x" executando a função Session.set ("X", "novo valor"). No Me- 
teor, as collections do MongoDB adotam esse pattern e reexecutam sempre 
que uma collection muda de estado, bem como quando a mesma é excluida 
do banco. 

Esse pattern, como o próprio nome diz, faz com que suas funções traba- 
lhem de forma reativa, ou seja, se mudou algo interno, reexecute sua função 
de saída referente ao atributo alterado. No quesito produtividade, isso evita 
que nós, programadores, implementemos essas rotinas de mudança de estado 
de um objeto, diminuindo incrivelmente muitas linhas de código. 

Voltando ao nosso projeto, vamos aplicar o conceito de programa- 
ção reativa através da implementação da caixa de posts. Primeiro edite o 





client/lib/helpers/timeline.js: 


Template.timeline.helpers({ 
posts: function() { 
return Session.get("posts") ; 


H; 


Com isso, já deixamos nossa timeline preparada para retornar os posts 
direto de uma Session. Agora temos que criar o formulário que per- 
mite publicar posts — este será um novo template que incluiremos na view 
principal ( client/index.html). Mas antes, vamos criar o template 
client/views/home/post .html com o formulário que segue: 


<template name="post"> 
<div class="row"> 
<div class="col-sm-12"> 
<form class="form-horizontal"> 
<fieldset> 
<legend>novo post</legend> 
<div class="row"> 
<div class="col-sm-9"> 
<textarea rows="2" 
class="form-control"> 
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</textarea> 
</div> 
<div class="col-sm-1"> 
<button class="btn btn-lg"> 
Publicar 
</button> 
</div> 
</div> 
</fieldset> 
</form> 
</div> 
</div> 
</template> 


Em seguida, vamos adicioná-lo na view principal, 
client/index.html: 


<head> 
<title>Meteor Bird</title> 
</head> 
<body> 
{{> header) 
<main class="container"> 
<section class="col-sm-12"> 
{{> post}} 
{{> timeline}} 
</section> 
</main> 
{{> footer}} 
</body> 


editando o 


Para finalizar essa feature, criaremos um listen no evento submit do for- 


mulario, para que capture a mensagem do post e armazene-a em um sim- 


ples array dentro de Session.set ("posts", posts). O Meteor trata os 


eventos de templates de forma semelhante aos helpers — a diferença é que 


o nosso evento adotará a convenção Template.post .events (). Basica- 


mente, um evento no Meteor é organizado através da estrutura chave-valor 


em que a chave é uma string estruturada por evento e elemento ( "evento 
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elemento"), e o valor é uma função em cujo parâmetro retorna o objeto 
event, semelhante ao framework jQuery (http://jquery.com) . 

Através do segundo parâmetro, chamado de template, temos acesso 
as funções template.finde template. findAll, que serão utilizadas 
para retornar um elemento interno do template. No nosso caso, o template 
retorna o template atual, e com isso é possível navegar entre seus elemen- 
tos internos. Utilizaremos a função template.find ("textarea") para 
obter a tag <textarea> e, assim, capturar os dados da mensagem publi- 
cada. Em seguida, utilizamos um shortcut lógico no trecho var posts 
= Session.get ("posts") || [];, que simplesmente retorna um array 
vazio quando Session.get ("posts") retornar undefined. Após ob- 
termos o array de posts, incluiremos um novo post no array e o atualizare- 
mos dentro da Session, via Session.set ("posts", posts). Paraver 
como ficou, crie o arquivo client /lib/events/post. js, seguindo a im- 
plementacao adiante: 


Template.post.events({ 
“submit form": function(e, template) { 

e.preventDefault(); 
var textarea = template.find("textarea") ; 
var posts = Session.get("posts") || (1; 
posts.push({message: textarea.value}) ; 
Session.set("posts", posts); 
textarea.value = ""; 


H; 


Um detalhe final é que nesta função é obrigatório rodar a função 
e.preventDefault () para forçar o browser a não realizar uma requisi- 
ção síncrona no servidor — ou seja, para que ele cancele a submissão padrão 
do formulário. 

Vamos rodar o projeto? Acesse http://localhost:3000 e publique seus 


posts na timeline. 
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) & localhost: 3000 > CK coose as 





Meteor Bird 
novo post 





Programar com meteor é ... 








últimos posts 


ola! 
Muito legal esse Meteor Bird!! 


Tudo bem galera? 


Figura 4.4: Timeline dinamica! 


O mais legal é ver tudo isso funcionando em tempo real! Agora abra um 
novo browser no mesmo endereço e publique novos posts... 
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Meteor Bird + | 


localhost:3000 e | (Bx Google Q 
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Meteor Bird 
novo post 
Publicar 


últimos posts 


Nenhum post publicado. 


Meteor Bird - Este é um projeto exemplo utilizado como didática no livro: Livro de Meteor 


Figura 4.5: Por que a timeline esta vazia? 


Mas que estranho! Cadê os posts anteriores da timeline? Esse problema 
ocorreu devido ao simples fato de que ainda não foi implementado código 
que envolva o banco de dados! Até agora fizemos uma timeline client-side 
visível apenas para o próprio usuário utilizando Session. 


4.4 PERSISTINDO E LISTANDO POSTS EM TEMPO-REAL 


Agora que temos o front-end de nossa primeira feature, vamos implemen- 
tar seu back-end para torná-lo 100% funcional. Basicamente, criaremos uma 
collection no MongoDB para armazenar os novos posts que serão listados na 
timeline em tempo-real. 

Começando a implementação, crie o arquivo models/post.js com 


conteúdo a seguir: 


Post = new Meteor.Collection(’posts’); 


Dessa forma, será instanciada a collection Post em variável global, 
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permitindo que utilizemos suas funções tanto no cliente como no servidor, 
afinal o diretório models é visível em ambos os lados. Feito isso, faremos 





uns refactorings nos códigos client/lib/helpers/timeline.js 
e client/lib/events/post.js, e substituiíremos o uso 
do objeto Session pela collection Post. Abra e edite 
client/lib/helpers/timeline. js, deixando-o da seguinte forma: 





Template.timeline.helpers({ 
posts: function() { 
return Post.find({}); 


H; 
Agora modifique também o código client/lib/events/post.js: 


Template .post .events({ 
"submit form": function(e, template) { 
e.preventDefault(); 
var textarea = template.find("textarea") ; 
Post.insert({message: textarea.value}) ; 
textarea.value = ""; 


H; 


Done! Vamos testar a timeline? Reinicie o servidor e acesse http:// 
localhost:3000. Agora todos os posts não serão excluídos e você também po- 
derá acessar essa página em quantas abas quiser e em qualquer navegador ao 
mesmo tempo. 

Parabéns! Terminamos nossa primeira funcionalidade do projeto: im- 
plementamos de forma bem simples, porém 100% funcional uma timeline de 
posts. Continue lendo pois, após criarmos as restantes features, voltaremos 
nesta timeline para fazer refactorings que permitirão a listagem de posts de 
usuários que você seguir na rede, mas para isso acontecer, vamos criar outras 


funcionalidades no projeto e faremos a integração delas com a timeline. 


39 


CAPITULO 5 


Signin e Signup de usuarios 


No capitulo anterior, exploramos o Meteor desenvolvendo o layout e a fun- 
cionalidade minima de uma timeline de posts. Começamos criando os tem- 
plates, programamos o mínimo de código suficiente para dar vida a timeline 
e finalizamos o capitulo persistindo e listando os posts no banco de dados 
MongoDB. 

Neste capítulo, vamos aprofundar nossos conhecimentos desenvolvendo 
a funcionalidade de Signin (login) e Signup (cadastro), utilizando o conjunto 
de funcionalidades do package Accounts, que é nativa do Meteor. 


5.1 EXPLORANDO ACCOUNTS DO METEOR 


O Accounts possui diversas funções referentes ao processo de login, logout, 
recuperação de senhas, mudança de senha, envio de e-mail verificador e ca- 
dastro de usuários. Ele é totalmente extensivo e permite a implementação de 
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autenticações customizáveis através do consumo de APIs externas, como 
por exemplo autenticação via Google, Facebook, Twitter, Github, Meetup 
etc. Diversas variações de Accounts são encontradas no Atmosphere: 


https://atmospherejs.com/?q=accounts 





000 The trusted source for JavaScript packages, Meteor resources and tools | Atmosphere 
| + The trusted source for JavaScri t sh 
(4) @ hr atmospherejs.com B- Q) (8) {] (E-| (e 


© Disable + BZ Cookies = Jë CSS + GM Forms ~ E) images + f Information + @ miscellaneous + J Outline + & Resize ~ f Tools + 4) View Source ~ 


SEARCH PACKAGES 


Q accounts 


accounts-entry accounts-ui-bootstrap-3 accounts-t9n 
roles accounts-ui-bootstrap- accounts-ui-bootstrap- 
dropdown 3-blaze 


Figura 5.1: Variações do package Accounts. 


Com base nessa introdução, vamos desenvolver um simples cadastro e lo- 
gin de usuário diretamente na base local do projeto, e mais para frente imple- 
mentaremos uma autenticação via Facebook. Por enquanto, adicionaremos 


três principais packages para criar um signin/signup convencional: 


mrt add accounts-base 
mrt add accounts-ui-bootstrap-3 
mrt add accounts-password 


O que faz cada package? 
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e accounts-base: API nativa que contém funções essenciais para sig- 
nin e signup de usuários, persistindo todos os dados no MongoDB; 


e accounts-password: este package provê funções para realizar vali- 
dação, mudança e recuperação de senha, além de possuir funções para 
envio de e-mail, como e-mail de verificação e reset de senha; 


* accounts-ui-bootstrap-3: possui um conjunto de interfaces 
prontas para renderizar um formulário de login, cadastro e recupera- 
ção de senha, tudo isso utilizando o framework Twitter Bootstrap 3. 





Agora vamos botar a mão na massa! Edite o template 
client/views/header.html: nele vamos incluir o wid- 
get {{> loginButtons}} que renderiza um template do 


accounts-ui-bootstrap-3. Este último contém toda interface de 
login, cadastro e recuperação de conta. 


<template name="header"> 
<header class="container"> 
<nav class="navbar navbar-default"> 
<div class="navbar-header"> 
<a class="navbar-brand">Meteor Bird</a> 
</div> 
<div class="navbar-collapse collapse"> 
<ul class="nav navbar-nav navbar-right"> 
{{> loginButtons}} 
</ul> 
</div> 
</nav> 
</header> 
</template> 


Veja como ficou legal... 
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Meteor Bird Sign In / Up ~ 


novo post 


Forgot password? Create account 


últimos posts 


Nenhum post publicado. 


Meteor Bird - Este é um projeto exemplo utilizado como didática no livro: Livro de Meteor 


Figura 5.2: Sign In / Up fornecido pelo accounts-ui. 


O melhor de tudo isso é que carregamos este widget com apenas uma 
linha de código e todo o fluxo do back-end (cadastro, login e recuperação de 
senha) já foi fornecido pelo accounts-base + accounts-password, ou 
seja, se você cadastrar uma conta, um novo registro na collection users será 
criado. E quando precisar dos dados das collections de usuários, você tem 
disponível a função nativa Meteor .users, que é o mesmo que rodar essa 


instância: Users = new Meteor.Collection('users'). 





5.2 ASSOCIANDO POSTS A UM USUARIO 


Nesta etapa, implementaremos um pouco de back-end. Vamos associar 
nossa timeline com o userId do usuário. Para fazer isso, utilizaremos o 
Meteor.userId(), que retorna o id do usuário da sessão e, em seguida, 
vamos associá-lo com seus posts publicados. Dessa vez, criaremos o método 
Post .publishem models/post. js para abstrair a complexidade dessa 
funcionalidade. Veja como fazer: 
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Post = new Meteor.Collection(’posts’) ; 


Post.publish = function(message) { 
this.insert (1 

message: message, 

date: new Date(), 

userId: Meteor.userId() 

H; 
F5 


Consequentemente faremos um refactoring em 
client/lib/events/post.js, para utilizar esse novo método 
Post.publish(): 


Template. post.events({ 
"submit form": function(e, template) { 
e.preventDefault(); 
var textarea = template.find("textarea") ; 
Post. publish(textarea.value) ; 
textarea.value = ""; 
return false; 


H); 


Para finalizar a associação, vamos criar uma função dentro do modelo 
Post, que será um encapsulamento de Post . find ((userId: userId}). 


Ela se chamará Post .list (userId) eficaráem models/post. js: 


Post = new Meteor.Collection(’posts’); 


Post.publish = function(message) { 
this.insert (1 

message: message, 

date: new Date(), 

userId: Meteor.userId() 

H; 
+3 


Post.list = function(userId) { 
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return this.find({userId: userId}) ; 
F; 


Para o final, usaremos esta query de listagem para que ele 
exiba somente posts do usuário logado, utilizando a função 
Meteor.userId() dentro do helper da timeline. Edite o arquivo 
client/lib/helpers/timeline.js: 





Template.timeline.helpers({ 
posts: function() { 
return Post.list(Meteor.userId()); 


H); 


5.3 EXIBINDO TIMELINE SOMENTE PARA LOGADOS 


Agora temos que restringir a timeline para que somente usuários loga- 
dos publiquem e visualizem os posts. Para resolver isso, existe uma 
marcação especial do accounts-base chamada ((currentUser)), 
que retorna os dados de um usuário quando o mesmo está logado 
no sistema. Com isso, criaremos um template pai dentro do di- 
retório client/views/home com o nome home.htmi, no qual 
vamos incorporar os templates client/views/home/post.html e 
client/views/home/timeline.html, somente quando o usuário esti- 
ver logado na aplicação. Quando não estiver logado o ((currentUser)) 
retornará nulo e com isso será exibida a mensagem: "você não esta 
logado, clique em Sign In / Up.". Para fazer isso, crie o template 
client /views/home/home.html com as tags a seguir: 


<template name="home"> 
{{#if currentUser}} 
<section class="col-sm-12"> 
{{> post}} 
{{> timeline}} 
</section> 
{{else}} 


<div class="text-center"> 
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<hi>Meteor Bird</h1> 
<h3>Não esta logado? Clique em "Sign In/Up".</h3> 
</div> 

{{/if}} 

</template> 


Em seguida, vamos atualizar o template principal 
client/index.html, deixando-o mais leve, apenas renderizando os 
templates header, home e footer. 


<head> 

<title>Meteor Bird</title> 

</head> 

<body> 

{{> header) 

<main class="container"> 
{{> home}} 

</main> 

{{> footer}} 

</body> 


Faça o teste! Acesse a URL da aplicação em http://localhost:3000 e visu- 
alize as novas telas dedicadas para usuário logado e usuário não-logado. 
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Nenhum post publicado. 


Meteor Bins - Exe 6 um preto enempao usthrado como gastos no Bvr iwe On Minor 


Figura 5.3: Usuário logado. 





Meteor Bird 
Você não esta logado, clique em “Sign In / Up". 


Metec Bird - Esto è um pres qnemeso uia come etica no bwrs w> Os Mansor 


Figura 5.4: Usuário não-logado. 
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5.4 AUTENTICAÇÃO VIA CONTA FACEBOOK 


O Accounts do Meteor é bem extensível, suas interfaces permitem criar va- 
riações de signin e signup que utilizem API de aplicações externas. Existem 6 
variações desses packages oferecidos nativamente pelo Meteor e +60 packages 
third-party existentes no Atmosphere (https://atmospherejs.com) . 

Nesta seção, vamos focar na inclusão de apenas uma variação de 
Accounts. Vamos utilizar o accounts-facebook para que os nossos 
usuários se autentiquem na aplicação através de uma conta Facebook (http: 
//facebook.com) . 

Habilitar o Accounts do Facebook na aplicação é simples, a parte mais 
chata é cadastrar uma aplicação no Facebook para gerar as chaves appId e 
secret que são usadas para se autenticar na rede social. 


Começando a implementação, vamos adicionar o package a seguir: 


mrt add accounts-facebook 


Em seguida, adicionaremos uma lista de permissões a respeito dos dados 
que iremos consumir da conta do usuário quando ele se autenticar em nosso 
sistema através do Facebook. Quando um usuário permitir seu acesso, ele li- 
bera diversas informações de sua conta, como seu e-mail, sua lista de amigos, 
seus últimos posts, seu perfil e muito mais. Cada informação varia de sistema 
para sistema, e para conhecer todas as permissões é necessário conhecer a 
fundo a documentação de sua API (no nosso caso, temos que estudar a API do 
Facebook através do Facebook Developers). Antes de uma aplicação externa 
permitir tal acesso, é exibida uma página da própria aplicação avisando sobre 
todas as informações que serão expostas ao se autenticar. No Meteor, utiliza- 
mos a função Accounts.ui.config() para configurar as permissões de 
cada autenticação externa via atributo request Permissions. No próximo 
capítulo explicarei em detalhes como autocompletar o nome do usuário que 
entrar na rede via Facebook. Porém se você não possui uma conta no Fa- 
cebook e pretende entrar através do cadastro convencional, então usaremos 
o atributo extraSignupFields para incluir um campo extra, este campo 
será o nome do usuário. Para aplicar estas configurações na aplicação, crie 
o arquivo client /lib/config/accounts auth. js com os códigos a 
seguir: 
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Accounts.ui.config({ 
extraSignupFields: [{ 
fieldName: ’name’, 
fieldLabel: ’Nome’ 

NH, 


requestPermissions: { 
facebook: [’email’, 'user about me?] 


H; 


Para que o cadastro convencional pré-preencha o nome do usuá- 
rio, teremos que criar um código no servidor, responsável por in- 
terceptar os dados do formulário durante o cadastro. Isso se faz 
através do evento Accounts.onCreateUser (options, user) 
Nesta função qualquer campo adicional será enviado através do 
objeto options['profile']['campo_adicional'], ou seja, 
options['profile']['name']. Por enquanto vamos apenas atri- 
buir esse campo name para o usuário, para isso temos que criar o arquivo 
server/lib/accounts. js eimplementar o código abaixo: 


Accounts.onCreateUser (function(options, user) { 


user[’profile’] = options.profile; 
return user; 
H; 
Em nossa aplicação, vamos apenas consumir o email e 
user_about_me (campos que contém dados básico do perfil — é lá 


que pegaremos o nome de um usuário Facebook). No server-side, temos 
que definir as chaves para acessar o serviço do Facebook, usando as chaves 
appIde secret. Para configurar essas chaves vamos utilizar um novo 
package que gerencia chaves de serviços externos: 


meteor add service-configuration 


Com este package, poderemos configurar diversos ser- 
viços de forma intuitiva, através das funções do modelo 
ServiceConfiguration.configurations. Para evitar contas du- 
plicadas ou triplicadas de um mesmo serviço, rodamos primeiro a 
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função ServiceConfiguration.configurations.remove ({}) 
para apagar todas as chaves dos serviços e, em seguida, rodamos 
ServiceConfiguration.configurations.insert () para regis- 
trar cada serviço no banco de dados. No nosso caso, vamos configurar 
apenas o serviço de autenticação do Facebook. Veja como fica essa 
implementação, crie o server/lib/services.js e inclua o código a 
seguir: 


ServiceConfiguration.configurations.remove({}) ; 
ServiceConfiguration. configurations. insert ({ 
service: ’facebook’, 
appId: ’inserir appId gerado pelo Facebook’, 
secret: ’inserir secret gerado pelo Facebook’ 


H); 


Obs.: Para cadastrar uma aplicação no Facebook, acesse o site https: 
//developers.facebook.com. Registre uma aplicação (provavelmente com 
outro nome, pois o Meteor Bird acabei de registrar), inclua o domi- 
nio de redirect (pode ser http://localhost:3000 ) para que, após o usuá- 
rio se autenticar, ele consiga voltar para tela principal do nosso sistema 
já autenticado. Ao registrar sua aplicação no Facebook, acesse o dash- 
board e procure pelos campos ID do aplicativo ( appId) e o App Se- 
cret ( secret). Copie e cole os respectivos valores da função anterior 
ServiceConfiguration.configurations.insert () dentro dos atri- 
butos appIde secret. 

Após finalizar essa etapa, só nos resta testar. Reinicie o servidor e acesse 
a página da nossa aplicação. Repare que automaticamente uma nova opção 
de login (via Facebook) foi incluída pelo Accounts UI, então clique nesta 
opção e se autentique com sua conta do Facebook. 
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Meteor Bird 


ja Meteor Bird util 
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Meteor Bird Sign In/ Up ~ 


Sign in with Facebook 


Meteor Birc or 


000 Facebook al 
{ @ hitps://www.facebook.com/login.php?skip api login=1&api key=7390978527762584&si | | 2, 2) 




















f Facebook 


Log in to use your Facebook account with Meteor Bird. 


Create account 
Email or Phone: 


Password: 
T) Keep me logged in 


Forgot your password? 


Si for Facebook 
ign up for Facebool EM Cancel 


Figura 5.5: Autenticação via Facebook. 


Parabéns! Fechamos mais um capítulo desenvolvendo um signin e signup 
em nossa aplicação, exploramos os principais recursos do objeto Accounts 
e seus packages auxiliares, também adicionamos uma autenticação via Face- 
book para agilizar o signin dos usuários. No próximo capítulo, criaremos um 
perfil de usuário e faremos alguns refactorings na autenticação do Facebook 
para consumir os dados dessa conta autocompletando nos dados do perfil. 


52 


CAPITULO 6 


Perfil do usuario 


6.1 (CRIANDO TEMPLATE DE PERFIL 


Neste capítulo, criaremos uma tela para o perfil do usuário logado, 
que será exibido no bloco lateral esquerdo, constituído pelos campos: 
nome e descrição. De início, um novo usuário não terá esses da- 
dos completos. Para isso, vamos criar um bloco que apresenta o 
perfil ( Template.profileBox), um template que será um formulá- 
rio para atualizar o perfil ( Template.profileForm) e, por último, 
um template que será o intermediador entre os templates anteriores ( 
Template.profile). Começaremos criando o bloco do perfil, que será 
um subtemplate do diretório do template home, ou seja, vamos criar o dire- 
tório client /views/home/profile, dentro do qual implementaremos o 
HTML client/views/home/profile/profile box.html. Este tem- 
plate vai utilizar a marcação {{currentUser.profile}} para apresentar 


6.1. Criando template de perfil 
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o perfil do usuário: 


<template name="profileBox"> 

{{#with currentUser .profile}} 
<h4>{{name}}</h4> 
<p>{{about}}</p> 
<button class="btn btn-block"> 
Editar perfil 
</button> 

{{else}} 
<p>Perfil incompleto</p> 
<button class="btn btn-block"> 
Completar perfil 
</button> 

{{/with}} 

</template> 


Assim, como criamos o bloco de exibição 
bém criaremos seu formulário para edição. Isso 


do perfil, tam- 
será no diretório 


client/views/home/profile/profile form.html, seguindo a 


implementação: 


<template name="profileForm"> 
<form class="form-horizontal"> 
<input type="text" class="form-control" 
placeholder="Nome"> 
<input type="text" class="form-control" 
placeholder="Descrição"> 
<button class="btn btn-success"> 
Atualizar 
</button> 
</form> 
</template> 


Agora que temos os templates, precisamos 


criar o mediador 


entre eles. Ele basicamente utilizará a condicional da variável 


Session.get('editProfile') para mostrar o bloco do perfil 


quando seu valor for false, e mostrar o formulário quando seu valor 
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for true. Além disso, esta variável será visível pelos templates atra- 


vés de uma função helper. Para criar esta regra, primeiro crie o helper: 


client/views/lib/helpers/profile. js com a seguinte regra: 





Template. profile.helpers({ 
editProfile: function() { 
return Session. get("editProfile"); 


H); 


Em seguida, crie © seu respectivo 
client/views/home/profile/profile.html: 


<template name="profile"> 
{{#if editProfile}} 

{{> profileForm}} 
{{else}} 

{{> profileBox}} 
{{/if}} 
</template> 


template em 


Finalmente, incluiremos perfil dentro de seu template pai, que é o 


client/views/home/home.html. Ele ficará na lateral esquerda através 


da tag <aside>, de acordo com código a seguir: 


<template name="home"> 
{{#if currentUser}} 
<aside class="col-sm-3"> 
{{> profile}} 
</aside> 
<section class="col-sm-9"> 
{{> post}} 
{{> timeline}} 
</section> 
{{else}} 
<div class="text-center"> 
<hi>Meteor Bird</h1> 


<h3>Não esta logado? Clique em "Sign In/Up".</h3> 


</div> 
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{{/if} 
</template> 


Parabéns! Já temos os templates definidos sobre o perfil. Que tal agora 
dar vida aos templates? Por exemplo, em profile box.html poderíamos 
dar funcionalidade aos links: “Editar perfil” e “Completar perfil” Eles se- 
rão responsáveis por apresentar o formulário e ambos executarão a mesma 
coisa, que será renderizar o Template.profileForm através do evento 
"click button" (clique do botão). Neste caso, estes links apenas irão atri- 
buir o valor true para a função Session.set ("editProfile") — e 
como Session é um objeto reativo, instantaneamente será feita essa transi- 
ção entre o template de bloco do perfil para o template de formulário. Veja 
como fazer criando o código client /lib/events/profile box. js: 


Template. profileBox.events({ 
"click button": function(e) { 
e.preventDefault() ; 
Session.set("editProfile", true); 


H); 


Com o formulário na tela, vamos agora codificar sua funcionali- 
dade de atualizar os dados do perfil. Eles serão persistidos na collec- 
tion users dentro do atributo profile, ou seja, em users.profile. 
Esta atualização será realizada via função Meteor.user.update(). 
Em seguida, mudaremos o estado de editProfile rodando a função 
Session.set ("editProfile", false),e também utilizaremos a fun- 
ção e.preventDefault () para cancelar a submissão padrão do formulá- 
rio. 

Criaremos a implementação dessas regras no código 


client/lib/events/profile form. js, veja como fazer: 


Template. profileForm.events({ 
“submit form": function(e, template) { 
e.preventDefault() ; 
var inputs = template.findAll("input"); 
Meteor.users.update( 
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{ id: this.userId }, 
{ $set: 
{ "profile.name": inputs[0].value, 
"profile.about": inputs[1].value + 


} 


Session.set("editProfile", false); 


H); 


Veja nas imagens como ficaram os layouts do perfil de usuário: 
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Template de perfil 


Postando aqui! 


Figura 6.1: Tela de perfil incompleto. 
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Caio Ribeiro novo post 


Web Developer Fustitack 
Wace Mage 


Figura 6.3: Perfil atualizado. 


6.2 AUTOCOMPLETANDO PERFIL VIA SIGNIN DO FACE- 
BOOK 


No capítulo anterior, foram criados dois modos de signin e signup na apli- 
cação. O primeiro modo é o convencional cadastro de nome, e-mail e 
senha. Já o segundo, é o signin via conta do Facebook. Foi adicio- 
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nado o package accounts-facebook e também implementamos o ar- 
quivo client /1lib/config/accounts auth. js, definindo as permis- 
sões de consumo das informações de um usuário Facebook através da função 
Accounts.ui.config(). Nele, adicionamos a lista de permissões que per- 
mite consumir os dados de e-mail e dados público do usuário, tudo isso den- 
tro do atributo requestPermissions. facebook. 

Com base nessa implementação, iremos interceptar novamente o evento 
de cadastro de usuário, para autocompletar os dados vindos de uma conta 
do Facebook. Essa interceptação será apenas para identificar se o signin foi 
realizado via serviço Facebook; se sim, pegaremos o nome do usuário atra- 





vés do objeto user. service. facebook.name, caso contrário, retorna- 
mos o fluxo normal do callback. Para fazer isso, vamos extender o atual 


server/lib/accounts. js com o código a seguir: 


Accounts. onCreateUser (function(options, user) { 
if (user.services.facebook) { 
var facebook = user.services.facebook; 
user[’profile’] = { 
name: facebook.name 
F; 
} else { 
user[’profile’] = options.profile; 
} 


return user; 


H); 


Feito isso, faça o teste: realize um login via Facebook com o qual, ao aces- 
sar a página principal, será exibido no perfil do usuário, o nome dele que veio 
de uma conta Facebook. 

Foi mais uma feature implementada na rede social! Dessa vez nós ex- 
ploramos um pouco a mais sobre manipulação de templates no client-side. 
Continue lendo! Nos próximos capítulos iremos trabalhar mais no server-side 
da aplicação, explorando alguns comandos principais do MongoDB, além de 
usar novos packages do Meteor. 
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Tela de perfil publico do usuario 


7.1 ADAPTANDO ROTAS NO PROJETO 


Antes de começarmos a fundo a implementar a tela de perfil público do usuá- 
rio, faremos alguns refactorings importantes para tornar o código da aplicação 
extensível e reutilizável, através do desenvolvimento de rotas. 

Nesta etapa, faremos algumas alterações em códigos que já implementa- 
mos, mas antes adicionaremos um novo package, que será o mestre em ge- 


renciar e manipular rotas. Seu nome é iron-router. 


mrt add iron-router 


Este é um framework que trata toda parte de rotas na aplicação. 
Mesmo que nossa aplicação seja em formato single-page, é possível torná- 
lo multi-page através de um roteamento de paths. Diferente das ou- 
tras linguagens em que as rotas redirecionavam para páginas HTML, o 
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iron-router trabalha mais a fundo com manipulação de templates, ou seja, 
com ele, cada redirect será uma transição de um template para outro. Ele 
também permite ter um controle mais completo sobre uma rota, através da 
implementação do pattern classicamente conhecido por controller. 

Voltando ao nosso projeto, começaremos a brincadeira criando o arquivo 
principal gerenciador de rotas, que se chama client/lib/routes.js. 
Veja a seguir como será seu código: 


Router .map(function() { 
this.route(’home’, { 
path: ’/? 
template: ’home’, 
layoutTemplate: ’layout’, 


H); 
H); 


Basicamente criamos a primeira rota da aplicação, que renderiza o tem- 
plate home ao acessar a rota raiz. Mas para que essa rota funcione cor- 
retamente, temos que adaptar a view principal para fazer funcionar o ro- 
teamento dos templates. Este roteamento inicia-se somente quando você 
criar o layoutTemplate incluindo nele a marcação {{> yield}}. 





No código anterior ( client/lib/routes .js) foi definido quem será o 
layoutTemplate. Este template criaremos após a tag <body> na view 
principal; ou seja, abra o client /index.html e faça as seguintes modi- 
ficações: 


<head> 
<title>Meteor Bird</title> 
</head> 
<body> 
</body> 
<template name="layout"> 
{{> header}} 
<main class="container"> 
{{> yield}} 
</main> 
{{> footer}} 
</template> 
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Se tudo der certo, a homepage da aplicação continuará sua exibição nor- 
malmente, mas agora a renderização dos templates serão controlados através 
das rotas no código client /lib/routes. js. Com essa pequena adapta- 
ção, deixamos a aplicação flexível para a inclusão de novas telas sem precisar 
adicionar códigos complexos no projeto. Essa flexibilidade ocorreu porque 
delegamos todo controle de templates parao iron-router. 

Essa foi nossa primeira adaptação no projeto usando este framework. 
Continuando as adaptações para usar o iron-router, vamos migrar as fun- 
ções de modelos existentes em alguns helpers para que elas sejam executadas 
na rota principal. Em client/lib/routes. js inclua o atributo data 


com a seguinte função: 


Router .map(function() { 
this.route(’home’, { 

path: 2/2, 

template: ’home’, 

layoutTemplate: ’layout’, 

data: function() { 

return { 

posts: Post.list (Meteor .userId()) 


Utilizando o atributo data, podemos rodar funções retornem objetos 
a serem renderizados nos templates. Agora que migramos essa função de 
listagem de posts, não há mais necessidade de manter seu antigo helper, então 
exclua o arquivo client /lib/helpers/timeline. js. 





7.2 PERFIL PÚBLICO DO USUÁRIO 


Agora que adaptamos nossa aplicação para o padrão de rotas, vamos focar 
na criação do perfil público do usuário. Para isso funcionar, cada usuário 
precisa ter uma rota própria e com identificador único para que tal perfil seja 


facilmente acessível por outros usuários. 
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Depois dessa breve explicação, vamos fazer um refactoring com o objetivo 
de reutilizar a timeline atual dentro do template de perfil público. Para isso, 
vamos apenas mover o template client /views/home/timeline.html 
para o diretório acima que será em client /views/timeline.html. 





Feita essa pequena alteração, vamos começar o desenvolvi- 
mento do perfil criando seu template. Crie o template de perfil em 





client/views/user/user.html: 


<template name="user"> 
{{#if user}} 
<div class="text-center"> 
{{#with user.profile}} 
<hi>{{name}}</h1> 
<p>{{about}}</p> 
{{/with}} 
{{> timeline}} 
</div> 
{felse}} 
<hi>Usuario não identificado.</h1> 
<a href="{{pathFor ’home’}}">Homepage</a> 
{{/if} 
</template> 


Nesta view, utilizamos uma nova marcação herdada do iron-router, 
que se chama {{pathFor}}. Ela basicamente retorna a string de uma url 
definida em sua respectiva rota. Neste caso retornou a url da 'home' via 
função {{pathFor 'home'}}. 


Agora vamos dar vida ao perfil público implementando suas opera- 
ções necessárias para renderizar dados corretamente. Para isso, edite o 


client/lib/routes.js: 


Router.map(function() { 
this.route(’home’, { 
path: ’/’, 
template: ’home’, 
layoutTemplate: ’layout’, 
data: function() { 
return { 
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posts: Post.list (Meteor .userId()) 
} 
} 
Hi 
this.route(’user’, { 
path: ’/user/:_id’, 
template: ’user’, 
layoutTemplate: ’layout’, 
data: function() { 
var _id = this.params._id; 
return { 
user: Meteor.users.findOne({_id: _id}), 
posts: Post.list(_id); 
} 


H); 
H; 


Na rota /user/:_id, temos um pequeno detalhe que é o seu identifi- 
cador: ":_id". Isto significa que a rota aceitará qualquer valor dentro do 
padrão desse path: /user/ [qualquer-valor]. E esse valor será injetado 
na variável this.params. id. Esse pattern de criação de variáveis através 
de parâmetro nas rotas existe em diversos frameworks web como por exem- 
plo: Rails, Express, VRaptor e outros. 

Acabamos de criar o perfil. Para fazer um test-drive, cadastre um usuário 
no sistema ou entre utilizando uma conta no Facebook, e em seguida abra 
uma nova janela no terminal. Via comando cd, acesse o diretório do projeto 


para logo depois acessar o cliente MongoDB com o comando: 


meteor mongo 


Com o cliente rodando, execute a função db.users.findOne() para 
buscar o primeiro usuário da base, já com o resultado JSON formatado na 
tela. Do resultado, apenas copie o valor do campo " id" e cole-o no browser 
formando o endereço http://localhost: 3000/user/[ id]. 
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Figura 7.1: Pegando _id do usuário via CLI do MongoDB. 
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Meteor Drs - Esta é um proto exemplo uslizado come údiica no ira 


Figura 7.2: Inserindo _id na rota /users/:id. 


Se tudo ocorrer bem, vocé vera a tela de perfil com os dados do usuario e 
seus últimos posts publicados. 


E mais um capítulo finalizado, parabéns! Não pare de ler este livro, pois 


no próximo episódio iremos implementar a clássica funcionalidade de seguir 
e deixar de seguir um usuário. 
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Follow me I will follow you 


8.1 INTRODUÇÃO SOBRE A FUNCIONALIDADE 


Este será um capítulo dedicado a explicar como criar a funcionalidade clássica 
de gerenciar seguidores na rede social. Afinal, o Meteor Bird é basicamente 
uma versão light, diet, sem açúcar do Twitter (http://twitter.com) , e caso você 
não saiba o significado de seguir um usuário, eis uma breve explicação: o 
objetivo principal de uma timeline é exibir seus posts e principalmente os 
posts de seus amigos; tais amigos são usuários que você segue na rede social. 
Por isso, seguir um usuário permite que você tenha acesso a conteúdos que 
ele publicar. 

Com base nessa explicação, vamos neste capítulo focar apenas na cons- 
trução dessa funcionalidade, que será dividida em pequenas funcionalidades 
listadas a seguir: 


8.1. Introdução sobre a funcionalidade Casa do Código 





* Botão follow (seguir) e unfollow (deixar de seguir); 


e Contador de seguidores no perfil do usuário. 


Antes de começarmos a próxima seção, que tal preparar a timeline para 
receber o nome do usuário de cada post? Assim, visualizaremos facilmente 
o autor de cada post. Para isso, edite o models/post. js adicionando um 
novo parâmetro: 


Post.publish = function (message, name) { 
var params = { 
message: message, 
time: new Date(), 
userId: Meteor .userId(), 
name: name 
+; 
this. insert (params) ; 


+; 


Em seguida, atualize o código de evento do post, o 
client/lib/events/post.js. Nele, pegaremos o nome do usuá- 
rio logado utilizando a função Meteor .user () .profile.name: 


Template.post.events({ 
"submit form": function(e, template) { 
e.preventDefault() ; 
var textarea = template.find("textarea") ; 
var name = Meteor.user().profile.name; 
Post. publish(textarea.value, name); 
textarea.value = ""; 


H; 


E para finalizar, adicione uma tag no template da timeline para 
que exiba o nome do autor. É o que faremos editando a view 


client/views/timeline.html: 





<template name="timeline"> 
<div class="row"> 
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<fieldset class="col-sm-12"> 
<legend>últimos posts</legend> 
{{#each posts}} 

<blockquote class="lead"> 


<p>{{message}}</p> 
<small>Autor: 
<a href="/user/{{userId}}">{{name}}</a> 
</small> 
</blockquote> 
<hr> 
{{else}} 


<p class="lead text-center"> 
Nenhum post publicado. 
</p> 
{{/each}} 
</fieldset> 
</div> 
</template> 


Pronto, veja como ficou a timeline: 
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Meteor Bird - Este é um projeto exemplo utilizado como didática no livro: Livro de Meteor 
Figura 8.1: Exibindo autor do post na timeline. 


8.2 (CRIANDO OS BOTÕES DE FOLLOW E UNFOLLOW 


Depois de limpar toda a casa no capítulo anterior, já temos espaço suficiente 
para criar novas funcionalidades com orientação às rotas da aplicação. Nesta 
seção, vamos focar na implementação dos botões Seguir e Deixar de seguir. 

Para começar, vamos codificar um novo modelo que chamaremos de 
Friendship. Eleterá uma estrutura simples, porém poderosa! Basicamente, 


ele vai armazenar apenas 2 campos: 
e userid: _id do usuário logado; 
e friendId: id do usuário que se pretende seguir. 


Com base nesses 2 campos, é possível criar as funcionalidades necessárias 
para seguir, deixar de seguir, contar quantos seguidores você tem e quantos 
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você segue. Mas indo por partes, vamos primeiro criar o modelo com as se- 





guintes funções: follow, unfollowe isFollowing. Para fazer isso, crie 





este código em models /friendship. js seguindo o trecho: 


Friendship = new Meteor.Collection(’friendships’) ; 


Friendship.follow = function(friendId) { 
this.insert (1 

userId: this.userld, 

friendId: friendId 

H; 
F; 
Friendship.unfollow = function(friendId) { 
this.remove({ 

userId: this.userId, 

friendId: friendId 

D; 
Fs 
Friendship.isFollowing = function(friendId) { 
return this.findOne({ 

userId: this.userld, 

friendId: friendId 

3 
>; 


Com base nessas 3 funções, atualizaremos a rota /user e criaremos 
2 novas rotas para follow e unfollow de usuários. Abra e edite o 
client/lib/routes. js para fazer isso. 


Router.map(function() { 
// código da rota "this.route(’home’)" 
this.route(’user’, { 
path: ’/user/:_id’, 
template: ’user’, 
layoutTemplate: ’layout’, 
data: function() { 
var _id = this.params._id; 
var isFollowing = Friendship.isFollowing( id); 
Session.set(’currentUserld’, id); 
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Session.set(’isFollowing’, isFollowing) ; 
return { 
user: Meteor.users.findOne({_id: _id}), 
posts: Post.list(_id) 

} 
} 

Hi 

this.route(’follow’, { 
path: ’/user/:_id/follow’, 
action: function() { 
var _id = this.params._id; 
Friendship. follow(_id) ; 
this.redirect(’/user/’? + id); 
+ 

Hs 

this.route(’unfollow’, 1 
path: ’/user/:_id/unfollow’, 
action: function() { 
var _id = this.params._id; 
Friendship.unfollow( id); 
this.redirect(’/user/’? + id); 
} 

H; 

H; 


Agora que temos as regras de follow e unfollow, vamos dar 
vida a eles criando seus respectivos botões no template de perfil público. 
Mas antes, falta criar algumas regras em helpers: uma regra é evitar 
que o usuário siga seu próprio perfil (através da função canFollow()), 
e a outra regra é a transição entre os botões Seguir e Deixar de se- 
guir (via função isFollowing()). Vamos criá-las no novo helper 
client/lib/helpers/follow_button. js: 





Template. followButton.helpers({ 
canFollow: function() { 
var userId = Meteor.userlId(); 
return userld && Session.get(’currentUserlId’) != userId; 
F; 


isFollowing: function() { 
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return Session.get(’isFollowing’); 
H; 


Esse helper será a base para implementar o template dos botões que cria- 





remosem client/views/user/follow_button.html com os códigos 


a seguir: 


<template name="followButton"> 
{{#if canFollow}} 
{{#with user}} 
{{#if isFollowing}} 
<a href="{{pathFor ’unfollow’}}" 
class="btn btn-primary btn-large"> 
Deixar de seguir 
</a> 
{{else}} 
<a href="{{pathFor ’follow’}}" 
class="btn btn-success btn-large"> 
Seguir 
</a> 
{{/if}} 
{{/with}} 
{{/if}} 
</template> 


Repare nos links dos botões. Novamente utilizamos o { {pathFor}} e, 
incrivelmente, ele detectou o _id correto do path. Mas como ele fez essa 
mágica? O iron-router segue convenções de URLs REST, ou seja, quando 
criamos as rotas /user/: id/followe /user/: id/unfollow, por 
convenção REST, estamos dizendo no path que o : id é do user. 
Com base nisso, as funções: ((pathFor 'follow'jj e {{pathFor 
"unfollow")) incluíram o _id corretamente porque utilizamos a marca- 
ção {{#with user}} em volta desses links. Isso fez com que automatica- 
menteo _iddeum user apareça nos links. 

Para mais detalhes sobre REST, recomendo a leitura desse livro: 


http://www.casadocodigo.com.br/products/livro-rest 
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Casa do Código 





Para finalizar, adicione o template dos 


client/views/user/user.html: 





<template name="user"> 
{{#if user}} 
<div class="text-center"> 
{{#with user.profile}} 
<hi>{{name}}</h1> 
<p>{{about}}</p> 
{{/with}} 
{{> followButton}} 
{{> timeline}} 
</div> 
{felse}} 
<hi>Usuario não identificado.</h1> 
<a href="{{pathFor ’home’}}">Homepage</a> 
{{/i£}} 
</template> 


botões dentro de 


Que tal testarmos a aplicação seguindo alguns usuários? Vamos lá! Crie 


um novo usuário com o nome que você quiser. No meu caso, criarei o João e 


a Maria. Capture seus respectivos . id — pode ser manualmente, buscando 


pelo MongoDB através dos comandos: 


meteor mongo 
db.users.find() .pretty() 


O importante é que você acesse no browser o perfil público desses dois 


usuários, mas logado pela sua conta atual. Veja a seguir os perfis de João e 


Maria: 
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Metoor Bird - Esae é um projeto exemplo utilzado como cidiática no live: Livro de Mensor 


Figura 8.2: Perfil público de João. 





— Para quam não me corheos, eu sou amiga do jobo 


Meteor Bird - Este é um projeto exemplo utiizade como didática no livia: Laro do Meteor 


Figura 8.3: Perfil público de Maria. 
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Agora clique no botão Seguir dos dois perfis. Funcionou não é!? Legal! 
Mas depois de um certo tempo, você parou de falar com João e agora quer 
deixar de seguir seu perfil; nisso, você clicou no botão Deixar de seguir do 
perfil dele... 
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Figura 8.4: Erro: Exception from Deps recompute. 


O que significa o erro Exception from Deps recompute? Esse erro ocor- 
rerá sempre que surgir algum conflito no PubSub da aplicação. No momento, 
estamos usando o package default: autopublish. Ele cria automaticamente 
um Publisheum Subscribe para cada collection que usarmos no client- 
side da aplicação. Usá-lo em ambiente de produção é uma falha gravíssima de 
segurança pois vai liberar acesso a qualquer função do MongoDB via console 
de um browser. Utilize-o apenas para prototipar sua aplicação e, principal- 
mente, para ter noção de quais operações serão utilizadas do banco de dados. 
Após definir todas as funções de banco de dados, remova este package e crie 
funções de publish e subscribe para cada operação utilizada das collections. 
Fique tranquilo, teremos um capítulo dedicado a como usar o PubSub e tam- 
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bém como preparar uma aplicação Meteor para ambiente de produção. 
Voltando ao nosso problema atual, basicamente esse erro ocorre quando 

alguma conexão PubSub está quebrada, porém, como descobrir o que causou 

esse erro? Ao atualizar a tela atual do erro, surgiu um novo erro, esse sim é 


mais específico e causador desse caos na aplicação. Veja a imagem a seguir: 


eee Meteor Bird My 
pa Meteor Bird tdak 


(4) @ locathost:3000/user/Ptvb7H4PHbDZjf6CM/unfollow e | (BI Google a) Le] [A] Bz le] 
Z s UE ES DS 











O Disable + $ Cookies + 7: CSS ~ jj Forms ~ E Images ~ f Information > @ Miscellaneous ~ 4 Outline > # Resize ~ f Tools ~ 





Meteor Bird Caião - 


Meteor Bird - Este é um projeto exemplo utilizado como didática no livro: Livro de Meteor 





© 
€ 


iLe = * | Console» | HTML CSS Script DOM Net Cookies 2 e 


lo Clear Persist Profile : All GZ Warnings Info Debug Info Cookies 





O Error: Not permitted. Untrusted code may only remove documents by ID. [403] mongo-..d3b5ca6 (line 357) 
...aAlue && value.$regex instanceof RegExp) { 


Eis o motivo do verdadeiro erro na aplicação. 


Figura 8.5: Erro: Not permitted. Untrusted code may only remove documents 
by ID. 


Esse erro é um alerta padrão que o próprio Meteor gera quando se tenta 
atualizar ou remover dados de uma collection via client-side. É basicamente 
uma trava de segurança, que exige que operações desse tipo sejam executadas 
no server-side da aplicação para evitar que elas sejam acessíveis e adulteradas 
pelo cliente. Para entender melhor, recomendo que leia esse link da docu- 
mentação oficial do Meteor: 

http://docs.meteor.com/#allow 

Agora que sabemos qual o real erro da aplicação, vamos focar em sua 
solução. Neste caso, vamos aprender a fundo como utilizar as funções 
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Meteor.methods e Meteor.call. Usamos o Meteor.methods para 
definir funções no servidor que serão chamadas pelo cliente através do 
Meteor.call. Fazendo uma comparação com outras tecnologias, podemos 
compará-lo com o uso do AJAX (Asynchronous Javascript and XML), em que 
o usamos no cliente para realizar requisições assíncronas no servidor. Ambos 
funcionam da mesma forma, a diferença é que a dupla Meteor .methods e 
Meteor.call possui um nível de abstração de alto nível, a ponto de apenas 
chamar a função do servidor e receber seu respectivo resultado. 

Com base nesses conceitos, vamos resolver o problema que não per- 
mite executar a operação de unfollow de um usuário, afinal esta função 
foi programada para remover um registro do banco de dados. Na prá- 
tica, vamos apenas encapsular a função Friendship.unfollow dentro de 
Meteor .methods, e migrar as demais funções de insert e update de outros 
modelos para este padrão também. 


Crie o arquivo server /methods. js com o código a seguir: 


Meteor .methods (1 
followUser: function(friendId) 1 
Friendship.follow(friendId); 
>, 
unfollowUser: function(friendId) { 
Friendship.unfollow(friendId) ; 
F; 
profileUpdate: function(name, about) { 
Meteor.users.update ( 
{_id: this.userId}, 
{$set: { 
"profile.name": name, 
"profile.about": about 
F} 
); 
ys 
publishPost: function(message, name) { 
Post. publish(message, name); 


H; 
Agora que migramos as principais funções de inserir, atualizar e remover 


80 


Casa do Código Capitulo 8. Follow me I will follow you 





dados, vamos mudar suas respectivas chamadas ao modelo para usarem o 


Meteor.call, de modo que não precisaremos mais usar o package default 


chamado insecure. Aliás, jamais o utilize em ambiente de produção, 


afinal ele permite a execução direta de funções update e remove das col- 


lections via browser. O insecure e autopublish (este último explicarei 


em detalhes no próximo capítulo) são packages pré-instalados por um único 


motivo, que é auxiliar a prototipagem rápida da aplicação. Não precisaremos 


mais dele então rode o seguinte comando: 


mrt remove insecure 


Começaremos o refactoring editando o client /lib/routes.js: 


Router.map(function() 1 
// código da rota "this.route(’home’)" 
// código da rota "this.route(’user’)" 
this.route(? follow”, { 
path: ’/user/:_id/follow’, 
action: function() { 
var _id = this.params. id; 
Meteor.call("followUser", id); 
this.redirect(’/user/’? + id); 
} 
P; 
this.route(’unfollow’, { 
path: ’/user/:_id/unfollow’, 
action: function() { 
var _id = this.params._id; 
Meteor.call("unfollowUser", _id); 
this.redirect(’/user/’? + id); 
} 
H; 
H; 


Em seguida, atualizaremos o código client/lib/events/post. 


Template .post.events({ 
"submit form": function(e, template) { 
e.preventDefault(); 


js: 
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var textarea = template.find("textarea") ; 

var name = Meteor.user().profile.name; 
Meteor.call("publishPost", textarea.value, name); 
textarea.value = ""; 


H; 
E por último, edite o arquivo client/lib/events/profile_form. js: 


Template.profileForm.events({ 
"submit form": function(e, template) { 
e.preventDefault(); 
var inputs = template.findAll("input"); 
var name = inputs [0] .value; 
var about = inputs[1].value; 
Meteor.call("profileUpdate", name, about); 
Session.set("editProfile", false); 


H; 
Pronto! Depois dessas dicas, agora você pode deixar de seguir o perfil do 
João. 


8.3 CONTADOR DE SEGUIDORES NO PERFIL 


Para deixar o perfil do usuário mais rico em informações, vamos criar um 
template para informar o total de seguidores e quantos usuários ele segue. 
Para manter o template reusável, vamos criá-lo de forma que seja apresentado 
na tela do usuário logado e também no seu perfil público. 

Crie o template client/views/friendship.html com o código a 





seguir: 


<template name="friendship"> 
<p>Seguidores: {{followers}}</p> 
<p>Seguindo: {{followings}}</p> 
</template> 


Adicionaremos esse template dentro do perfil público em 





client/views/user/user.html, através do marcador {{> 


friendship}}: 
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<template name="user"> 
(gif user}} 
<div class="text-center"> 
{{#with user.profile}} 
<hi>{{name}}</h1> 
<p>{{about}}</p> 
{{/with}} 
{{> friendship}} 
{{> followButton}} 
{{> timeline}} 
</div> 
{{else}} 
<hi>Usudrio não identificado.</h1> 
<a href="{{pathFor ’home’}}">Homepage</a> 
{{/i£f}} 
</template> 


E também adicionaremos este 


client/views/home/home.html: 


<template name="home"> 
{{#if currentUser}} 
<aside class="col-sm-3"> 
{{> profile}} 
{{> friendship}} 
</aside> 
<section class="col-sm-9"> 
{{> post}} 
{{> timeline}} 
</section> 
{{else}} 
<div class="text-center"> 
<hi>Meteor Bird</h1> 


template 


<h3>Não esta logado? Clique em "Sign In/Up".</h3> 


</div> 
{{/if}} 
</template> 


em 


Feitas essas inclusões, vamos criar as funções para calcular o total de 
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followers e followings, através da collection Friendship. Abra e 
edite o código models/friendship. js: 


Friendship = new Meteor.Collection(’friendships’) ; 
// código da função "Friendship.follow()" 

// código da função "Friendship.unfollow()" 

// código da função "Friendship.isFollowing()" 
Friendship.followings = function(userId) 1 

return this.find({userId: userId}).count(); 

+; 

Friendship.followers = function(friendId) { 
return this.find({friendId: friendId}).count(); 
J; 


Por fim, vamos usá-las nas rotas user e home. Abra e edite o 


client/lib/routes. js e faça essa mágica da seguinte maneira: 


Router .map(function() { 
this.route(’home’, { 
path: ’/’, 
template: ’home’, 
layoutTemplate: ’layout’, 
data: function() { 
var _id = Meteor.userId(); 
return { 
posts: Post.list(_id), 
followers: Friendship.followers(_id), 
followings: Friendship. followings (_id) 
} 
+ 
Hj 
this.route(’user’, { 
path: ’/user/:_id’, 
template: ’user’, 
layoutTemplate: ’layout’, 
data: function() { 
var _id = this.params._id; 
var isFollowing = Friendship.isFollowing( id); 
Session.set(’currentUserld’, id); 
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Session.set(’isFollowing’, isFollowing) ; 
return { 
user: Meteor.users.findOne({_id: _id}), 
posts: Post.list(_id), 
followers: Friendship.followers(_id), 
followings: Friendship. followings (_id) 


H; 
// código da rota "this.route(’follow’)" 
// código da rota "this.route(’unfollow’)" 


Veja como ficou bonito esse template: 


000 Meteor Bird al 
Í c areca Bid [ 


@ localhost:3000 e (E~ Google Q) (8) (| (S| [e 

















Meteor Bird Caio - 
Caio novo post 
Meteor! 
últimos posts 

Seguindo: 780 

Ola! 

— Autor: Caio 

Tudo bem? 

— Autor: Caio 

hil 

— Autor: Caio 


Figura 8.6: Contador de seguindo e seguidores. 
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8.4 VISUALIZANDO POST DE QUEM VOCE SEGUIR 


Para finalizar o capitulo, vamos melhorar nossa timeline. Ja temos todos os 
recursos implementados para seguir usuários, mas nada disso tem graça se 
não for possível visualizar os posts desses usuários — o mesmo vale para as 
pessoas que o estão seguindo nesta rede social por apenas um motivo: ver 
seus posts. 

Na collection Friendship são mantidos todos os ids dos usuários que 
estão seguindo e sendo seguidos por outros usuários da rede. Para incremen- 
tar os posts da timeline de um usuário, basta apenas buscar todos os ids que o 
usuário estiver seguindo e, em seguida, usá-la como condição na consulta de 
posts, através da função Post . list. Dessa maneira, os resultados são orde- 
nados em ordem cronológica decrescente, ou seja, do último para o primeiro 
post publicado. 

Que tal implementar essa funcionalidade? Abra o arquivo 
models/friendship.js. Nele, vamos criar uma função que precisa 
retornar os ids de todos os perfis que o usuário principal estiver seguindo 
e incluir também o id do usuário principal. Para essa tarefa, crie a função 
Friendship.timelineIds (), que basicamente filtrará todos os docu- 





mentos pertencentes ao userId em parâmetro. Porém, por questão de 
performance não pegaremos todos os dados de cada documento, e sim, 
somente o atributo friendId. Use a função map para transformar o array 
de documentos em um array de friendId e, por último, inclua o próprio 
userId neste mesmo array. Veja como fica a lógica desse código: 


Friendship.timelineIds = function(userld) { 
var timelineIds = this.find({ 
userId: userId 
}).map(function(f) { 
return f.friendId; 
4); 
timelineIds.push (userId); 
return timelinelds; 


+; 


Agora que temos essa função que retorna um array de ids de usuários, 
vamos usá-la para buscar os recentes posts desses usuários, tornando a time- 
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line funcional de verdade. Edite o models/post. js e modifique a fun- 
ção Post.list para retornar posts com base no array de ids de usuários 
em parâmetro (userIds), ordenando do último para o primeiro post publi- 
cado, e também por nome em ordem alfabética (através do atributo (sort: 


(time: -1, name: 1}}), veja abaixo: 


Post.list = function(userlds) { 
return this.find( 
{userId: {"$in": userIds}}, 
(sort: (time: -1, name: 1}} 
); 

F3 


Para finalizar, atualize a listagem de posts nas rotas 'home' e 'user'. 
Abrao client/lib/routes. js eimplemente o código a seguir: 


Router.map(function() { 
this.route(’home’, { 
path: ’/’, 
template: ’home’, 
layoutTemplate: ’layout’, 
data: function() { 
var _id = Meteor .userId(); 
var timelinelds = Friendship.timelinelds( id); 
return { 
posts: Post.list(timelinelds), 
followers: Friendship.followers( id), 
followings: Friendship.followings( id) 
} 
} 
H; 
this.route(’user’, { 
path: ’/user/:_id’, 
template: ’user’, 
layoutTemplate: ’layout’, 
data: function() { 
var _id = this.params._id; 
var timelinelds = Friendship.timelinelds( id); 
var isFollowing = Friendship.isFollowing( id); 
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Session.set(’currentUserld’, 
Session.set(’isFollowing’, isFollowing) ; 
user: Meteor.users.findOne({_id: _id}), 
posts: Post.list(timelinelds), 


return { 
followers: Friendship.followers(_id), 
followings: Friendship. followings (_id) 


} 
// código da rota "this.route(’follow’)" 
// código da rota "this.route(’unfollow’)" 
Com esse código implementado corretamente, finalizamos a listagem de 
a) [e)la] [m] [e] 








} 
H; 
posts da timeline. Ou seja, teremos um resultado semelhante a esta imagem: 
eee Meteor Bird 
jo Meteor Bird bd 
(4) localhost e EB Google 
© Dose + BL Cookies + JË 55 + Forms + E images = E information + @ Miscesaneoos + 7 Outine + g? Resize + f Tools + <> View source + 
Meteor Bird Caio Ribeiro ~ 
varow ses ad 
eee 
Sapine e últimos posts 
olal galera do Meteor! 


Seguindo: 982 
Muito legal esse Meteor-bird 


Gogogo! 


Figura 8.7: Timeline com posts multiusuários. 


Parabéns! Vocé acabou de implementar mais uma feature com sucesso 
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No próximo capítulo exploraremos a fundo a adoção de PubSub do Meteor 
para tornar nossa aplicação ready for production!, não perca! 
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Publications e Subscriptions 


9.1 O QUE É PUBSUB? 


O PubSub (Publications and Subscriptions), para quem não conhece, é um 
pattern cujo conceito é realizar mensageria através de dois personagens: um 
publisher (o publicador) e um subscriber (o assinante). 

Esse conceito é utilizado em vários tipos de aplicações, como por exem- 
plo: newsletters, chats e leitores de RSS. Ele funciona da seguinte maneira: 
o publisher é o responsável por emitir dados para todos os seus subscribers, 
e também um subscriber pode enviar mensagens para o publisher, fazendo 
com que o publisher trabalhe de forma mais específica com esse subscriber. 
Por exemplo, em um sistema newsletter, você, usuário, é o subscriber e, para 
receber atualizações desse serviço (neste caso receber atualizações de um pu- 
blisher), você precisa informar seu e-mail para que ele saiba quem você é — 
ou seja, enviar alguns dados para o publisher, para que ele passe a enviar atu- 
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alizações para seu e-mail. 

O Meteor já vem com uma biblioteca nativa de PubSub, então 
implementá-lo é bem tranquilo, além do mais, é uma obrigação fazer isso 
para que seja viável sincronizar dados entre cliente e servidor em um ambi- 
ente de produção. 

Trabalhar corretamente com PubSub no Meteor vai garantir o desenvolvi- 
mento de uma aplicação sustentável, visto que uma implementação mal-feita 
vai tornar o sistema uma carroça, de tão lenta que será a velocidade na sincro- 
nização dos dados. Outro detalhe de extrema importância é a segurança dos 
dados, pois uma publicação que liberar dados errados para o usuário vai gerar 
vazamento de informações na aplicação. Por isso, peço que leia este capítulo 


com atenção, para aprender como funciona esse mecanismo do Meteor. 


9.2 ENTENDENDO SEU MECANISMO 


Imagine um cenário em que nossa aplicação seja acessada por mais de 10 mil 
usuários. Nele, temos um usuário que segue muitos usuários populares, cerca 
de mil. Como sabemos, o objetivo do PubSub é sincronizar dados entre o ser- 
vidor MongoDB e o cliente Minimongo, o que faz com que o Meteor trafegue 
apenas dados seguindo seu princípio data on-the wire. Essa sincronização se 
faz através do protocolo DDP (Data Distribution Protocol). Em resumo, este 
protocolo é o que faz a biblioteca PubSub enviar e receber dados através de 
objeto JSON em tempo real. 
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UM POUCO SOBRE DDP 


Uma aplicação Meteor em execução trabalha simultaneamente com 
dois tipos de servidores: 


e Servidor HTTP: responsável por servir conteúdo estático e tratar 
requisição do cliente. Internamente, ele utiliza o framework Con- 
nect (http://www.senchalabs.org/connect) do Node.js para reali- 
zar esse trabalho. 


e Servidor DDP: este é um servidor inteiramente dedicado a lidar 
com PubSub, Meteor.methods e funções do MongoDB. Seu meca- 
nismo funciona graças ao SockJS (http://sockjs.org) , que trabalha 
transportando os dados entre o cliente e o servidor em tempo real. 











Voltando ao cenário em que temos uma rede social com 10 mil usuários, 
queremos mostrar na timeline os últimos posts de cada usuário seguido, e 
para isso, o mais óbvio é sincronizar os 10 mil usuários entre cliente e servidor, 
isso é, para cada usuário logado no sistema. Ao fazer essa prática, você terá 
um gargalo muito grande na aplicação, visto que a cada usuário teremos que 
carregar no cliente os dados de 10 mil usuários. Esse é o comportamento 
padrão do autopublish habilitado. Afinal, somente quem desenvolve a 
aplicação conseguirá filtrar os dados corretamente. 

O ideal, neste caso, é publicar apenas o montante de usuários coerente 
ao total de usuários seguidos, fazendo com que cada um sincronize de forma 
eficiente somente os dados necessários para ele. 
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DOOD 
E 5 J E J Servidor 


MongoDB 


SUBS 
| J E | J 5 E Cliente 


Minimongo 


Figura 9.1: Publicando somente o necessário para o cliente. 


Outro detalhe é que vale a pena sincronizar um montante aceitável de 
dados, visto que toda manipulação realizada no client-side será executada de 
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forma rápida graças aos mecanismos de prefetching e model simulation do 
Minimongo, que basicamente faz um cache do resultado de uma publicação, 
mantendo no cliente esses os dados para uso e manipulação. 


9.3 ADAPTANDO O PUBSUB NO PROJETO 


Para entender na prática os conceitos de PubSub, realizaremos algumas mo- 
dificações no Meteor Bird. 

A primeira tarefa será remover o package autopublish, afinal ele deve 
ser usado apenas para prototipar um sistema, e como já terminamos a proto- 
tipação deste projeto, não há motivos de usá-lo mais. Aliás deixá-lo instalado 
em ambiente de produção vai gerar uma grande brecha de segurança, tor- 
nando possível rodar qualquer consulta do banco de dados através do con- 
sole JavaScript de um browser, ou seja, não há mais necessidade de manter 
essa dependência na aplicação, pois não queremos que qualquer um faça uma 
festa indesejada, adulterando os registros do banco de dados ou pior excluir 
todos os registros conforme a imagem abaixo: 
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Meteor Bird Calo Ribeiro ~ 


Caio Ribeiro novo post 


Editar perfi Publique aqui Publicar 





Seguidome: 0 últimos posts 
Seguindo: 5 
olal 
— Autor: Calo 
sw lo I r| Consoles | HTML CSS Script DOM Net Cookies B )eeo 


dê Cear Persist Profile All ZÐ Warnings info Debuginfo Cookies 
Com o autopublish habilitado é possível rodar- qualquer query no client-side, cuidado! 


© >>> Post.remove(()) 


Figura 9.2: Cuidado com autopublish! Desinstale-o em produção. 


Desinstaleo autopublish: 


mrt remove autopublish 


Reinicie o servidor Meteor. Repare que após remover o autopublisha 
aplicação vai parar de funcionar corretamente. 
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ooo Meteor Bird A 


| Meteor Bird lib 





(4) & localhost > KE- Goog a) [e)a] [E=] (8. - 


© Osabie + A Cookies + Zé CSS + MM Forms ~ E images = f Information + O miscellaneous + / Outline + g Resize + g Tools + <> View Source + 


Meteor Bird Calo Ribeiro ~ 
Caio Ribeiro 

novo st 
eo Motnor po 
ECO Publicar 
Seguidores: O últimos posts 
Seguindo: O 


Nenhum post publicado 


Meteor Bird - Este é um projeto exemplo utilizado como didática no vro: Livro de Matoor 


Figura 9.3: Ué! Por que a timeline parou de funcionar?. 


Fique calmo! Este problema ocorreu porque nenhum PubSub foi criado. 
Antes, com autopublish habilitado, tudo era gerado automaticamente, e 
agora teremos que criar um PubSub para cada consulta no banco de dados. 

Primeiro, criaremos os publishers, pois estes são os principais e 
mais fáceis de implementar no server-side do sistema. Crie o código 
server/publications.js, que vai conter todos publishers da aplica- 
ção. Para tornar as publicações reativas, vamos englobar cada função 





Meteor .publish no callback da função Meteor .autorun, fazendo com 
que a qualquer alteração nos modelos ocorra um recomputation de cada pu- 
blicação. 


Meteor.autorun(function() { 


Meteor.publish("posts", function(_id) 1 
var timelineIds = Friendship.timelinelds( id); 
return Post.list(timelinelIds) ; 
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H); 


Meteor.publish("friendship", function( id) { 
return Friendship. followersAndFollowings(_id) ; 


H); 


Meteor.publish("isFollowing", function(_id) { 
return Friendship.isFollowing( id); 


H); 


Meteor.publish("user", function(_id) { 
return Meteor.users.find({_id: _id}); 


H); 
H; 


Repare que em Meteor.publish ("friendship") estamos utili- 
zando uma nova função: Friendship.followersAndFollowings. Seu 





objetivo é retornar todos os followers e followings do usuário, pois 
será este resultado que publicaremos do servidor para o cliente assinar. Para 
implementá-la, edite o arquivo models/friendship. js incluindo a fun- 
ção a seguir: 


Friendship.followersAndFollowings = function(_id) { 
return this.find({$or: [{userId: _id}, {friendId: _id}]}); 
J5 


Já no client-side, teremos que adaptar as funções de algumas rotas, 
e para isso utilizaremos uma nova função do iron-router, chamada 
de onBeforeAction. No callback desta função, incluiremos todos os 
subscribes necessários para as rotas 'home' e 'user'. Ao incluir os 
subscribers necessários, algumas funções de modelos serão excluídas da 
rota, visto que elas já serão publicadas pelo servidor — este é o caso da função 





Friendship.timelineIds. Editeo client/lib/routes. js e faça as 
seguintes alterações: 


Router .map(function() { 
this.route(’home’, { 
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path: ’/’, 

template: ’home’, 

layoutTemplate: ’layout’, 
onBeforeAction: function() { 

var _id = Meteor.userId(); 

id); 
this.subscribe("friendship", _id); 
+, 

data: function() { 

var _id = Meteor.userId(); 


this.subscribe("posts", 


return { 
posts: Post.find({}), 
followers: Friendship.followers(_id), 
followings: Friendship.followings( id) 
} 
} 
Hs 
this.route(’user’, { 
path: ’/user/:_id’, 
template: ’user’, 
layoutTemplate: ’layout’, 
onBeforeAction: function() { 
var _id = this.params._id; 
this.subscribe("posts", _id); 
this.subscribe("friendship", _id); 
this.subscribe("isFollowing", _id); 
this.subscribe("user", _id); 
}, 
data: function() { 
var _id = this.params._id; 
var isFollowing = Friendship.isFollowing( id); 
Session.set('currentUserId”, id); 
Session.set(’isFollowing’, isFollowing) ; 
return { 
posts: Post.find({}), 
user: Meteor.users.findOne({_id: _id}), 
followers: Friendship.followers(_id), 
followings: Friendship. followings (_id) 
} 
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} 

4); 

// função this.route(’?follow’) ; 
// função this.route(’unfollow’) ; 


H; 


Além da exclusão de Friendship.timelineIds, tivemos uma outra 





alteração de funções nas rotas. Repare que a função Post .list foi substi- 
tuída pela função Post. find(()). Eo mais engraçado é que esta função 
não vai retornar os posts de todo mundo e sim os posts da função Post. list 
que foi implementado na publicação Meteor .publish('posts'). Omo- 
tivo desse comportamento é que funções de collections no client-side sempre 
executarão com base nos resultados que receberem de uma publicação server- 
side. Isto é, já que criamos Meteor .publish ("post") para retornar ape- 
nas os posts do usuário e de quem ele estiver seguindo, ao assinarem essa 
publicação, o modelo Post no client-side somente terá esses dados para ma- 
nipular, então se for usar Post. list () ou Post. find(()) os resultados 
serão o mesmo. 

Praticamente terminamos a prototipagem de nosso projeto, o Meteor 
Bird. Nos próximos capítulos focaremos em trabalhar a aplicação para coloca- 
lá no ar com qualidade, ou seja, implementaremos testes e realizaremos al- 
guns tunings para garantir que nossa aplicação funcione perfeitamente em 
um ambiente de produção. 
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CAPITULO 10 


Testes, testes e mais testes 


10.1 FRAMEWORKS DE TESTES PARA O METEOR 


Neste capítulo vamos explorar um tema que é muito importante não apenas 
para o Meteor, mas para qualquer linguagem de programação: vamos falar 
sobre criação de testes. 

O Meteor possui alguns framework de testes. Atualmente existem quatro 
em destaque: RTD, TinyTest, Mocha Web e Laika. 

Esses frameworks permitem testar um mesmo trecho de código no cliente 
e no servidor, o que faz essas ferramentas se tornarem totalmente específicas 
para trabalhar com o Meteor. 


10.1. Frameworks de testes para o Meteor Casa do Código 








POR QUE DEVEMOS CRIAR TESTE DE CODIGOS 


É muito importante que todo desenvolvimento de classes ou módulos 
seja acompanhado com seu respectivo código de testes. Testar um código 
faz com que você identifique e corrija diversos erros antes de colocar o 
novo código no ar. Criar testes é uma prática extremamente recomen- 
dada e adotada por muitas empresas e projetos open-source. Além de 
garantir que seu código funcionará como esperado, isso pode influen- 
ciar no código que você esta criando, fazendo com que você identifique 
e melhore o design do código. Outra vantagem dos testes é que tornam 
o projeto mais flexível e preparado para mudanças de regras de negó- 
cio, visto que os testes apontarão quais funções quebrarão ao mudar tal 
trecho de código na aplicação. 

Existem vários livros explicando como e quando criar testes, além de 
ensinar técnicas para tornar um código menos acoplado e facilmente tes- 
tável. Na editora Casa do Código existem três livros sobre TDD (Test- 
Driven Development): 


* Test-Driven Development com Java 


http://www.casadocodigo.com.br/products/livro-tdd 


* Test-Driven Development com .NET 


http://www.casadocodigo.com.br/products/livro-tdd- dotnet 


* Test-Driven Development com Ruby 


http://www.casadocodigo.com.br/products/livro-tdd-ruby 


Estes livros, por exemplo, ensinam boas práticas de testes um com 
a plataforma Java, um com a plataforma .NET e um com Ruby. Apesar 
de serem específicos para uma determinada linguagem, grande parte de 


seus conceitos são aplicáveis para qualquer linguagem de programação. 
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10.2 PRIMEIROS PASSOS COM LAIKA 


O Laika é um framework fácil de configurar e de se trabalhar. Ele foi inspirado 
no framework Mocha (http://visionmedia.github.io/mocha) do Node.js, ou 
seja, ele herdou algumas características como criar testes no estilo TDD (Test- 
Driven Development) ou BDD (Behavior-Driven Development), customização 
do report dos testes e criação de um arquivo de configuração. 

Para instalar o Laika, é necessário instalar o PhatomJS primeiro, pois ele 
será muito utilizado na bateria de testes do client-side do projeto. Para usá-lo, 
recomendo que leia seu manual de instalação neste link (http://phantomjs. 
org/download.html) para instalá-lo de acordo com seu sistema operacional. 

O Laika é um módulo Node.js, presente no site NPM. Instale-o em modo 
global para habilitar seu CLI (Command Line interface), para isso execute o 


comando: 
npm install -g laika 


O Laika roda em uma instância default do serviço MongoDB, ou seja, ele 
vai trabalhar com um banco de testes separado do banco atual da aplicação. 
Aliás, ele vai rodar em cima do MongoDB default instalado em sua máquina. 

A dica a seguir não é obrigatória, faça apenas se quiser e, principal- 
mente, se achar necessário. É possível configurar o MongoDB para rodar 
os testes mais rápido em ambiente de desenvolvimento. Para isso, finalize o 


serviço atual do MongoDB e inicie-o utilizando este comando: 
mongod --smallfiles --noprealloc --nojournal 


Com nosso framework de teste instalado, vamos criar os nossos primeiros 
testes. Focaremos apenas em implementar testes para os modelos, pois é lá 
que foram criadas as principais regras de negócio da aplicação. 


10.3 CRIANDO TESTES 


Criar testes no Meteor é bem diferente do que em outras tecnologias como 
Ruby, Java, PHP ou Node.js. Isso ocorre porque, no Meteor, um modelo 
é compartilhado e acessado tanto no servidor como no cliente, e por isso, 
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dependendo das regras de negócio, será necessário criar testes para verificar 
como um modelo se comporta em ambos os lados da aplicação. 


Testando o modelo Friendship 


Começando nossa codificação, vamos criar os testes para o modelo 
Friendship, visto que ele possui muitas funções importantes que precisam 
ser testadas. Criaremos seu respectivo teste em tests/friendship. js, 





onde testaremos primeiro a função Friendship.follow. Para simular 
esse teste, teremos que utilizar um objeto server para que através do call- 
back de server .eval1,o modelo Friendship rode a função de observação 
de seu estado. Neste teste observaremos apenas se o modelo recebeu um novo 
registro, através da função added e caso essa função seja executada ela irá 
emitir um evento enviando o estado do modelo via função emit ("added", 
obj). Essa observação somente será executada quando no client-side, através 
do callback client .eval,a função Meteor.call('followUser") for 
executada. Quando o evento emit ("added") for acionado, utilizaremos o 





callback de server. once ("added") para realizar os devidos testes através 
das funções existentes do objeto assert. No teste abaixo apenas utilizare- 
mos a função assert .equal () para verificar seo friendIde userId 
são do cliente que a executou. 


var assert = require("assert"); 


suite("Friendship", function() { 
test("follow", function(done, server, client) 1 


server.eval(function() { 

Friendship.find() .observe({ 
added: function(obj) { 
emit ("added", obj); 
} 

H; 

H; 


server.once("added", function(obj) { 
assert.equal(obj.friendId, "123"); 
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assert.equal(obj.userId, this.userld); 
done(); 
H; 


client.eval(function() { 
Meteor.call("followUser", "123"); 
H; 


H; 
H); 


Basicamente, este teste simulou um cliente rodando a função 





Friendship.follow("123") que está encapsulada dentro da fun- 
ção Meteor.call("followUser", "123"), afinal nesta etapa já 
removemos o package insecure, então qualquer função de inserção, 
atualização ou exclusão será executada no cliente via Meteor.call. 

Implementar o teste da função Friendship.unfollow é um pouco 
parecido com a anterior. A diferença é que primeiro teremos que registrar um 
follow e, em seguida, fazer um unfollow do mesmo userId, para depois 
observar se no modelo Friendship houve uma exclusão desse registro. O 
código a seguir exemplifica na prática esse teste: 


var assert = require("assert"); 


suite("Friendship", function() { 
// Código: test("follow")... 


test("unfollow", function(done, server, client) { 
server.eval(function() { 
Friendship.find() .observe({ 
removed: function(obj) { 
emit ("removed", obj); 
} 
D; 
F); 


server.once("removed", function(obj) { 
assert.equal(obj.friendId, "A"); 
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assert.equal(obj.userId, this.userId) ; 
done(); 
H; 


client.eval(function() { 
Meteor.call("followUser", "A", function() { 
Meteor.call("unfollowUser", "A"); 

F); 

Hs 


H); 
H; 


E como faz para testar a função Frienship.isFollowing()? Essa 





é mais simples: faremos um follow com userId válido e vamos rodar a 
função Frienship.isFollowing duas vezes, uma com userId utilizado 





pelo follow eum userId inexistente. No final, checaremos se um objeto 


existe e se o outro não existe. 


var assert = require("assert"); 


suite("Friendship", function() { 
// Código: test("follow")... 
// Cédigo: test("unfollow")... 


test ("isFollowing", function(done, server, client) { 
server.eval(function() { 
Friendship.find() .observe({ 
added: function(obj) { 
var obj1 = Friendship.isFollowing("123"); 
var obj2 = Friendship.isFollowing("321"); 
emit("check", obj1, obj2); 
} 
FX; 
Hi 
server.once("check", function(obj1, obj2) { 
assert .notEqual(obji, undefined); 


assert.equal(obj2, undefined); 
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done() ; 
D; 


client .eval (function() { 
Meteor.call("followUser", "123"); 
De 

D; 

F); 


Outro teste que vale a pena implementar é para a função 
Friendship.timelinelds. Sua regra é retornar todos os friendIds 





de um userId incluindo também o próprio userId no array. Para 
simular esse teste, o cliente terá que seguir dois usuários "A" e "B". 
No servidor, deixaremos o modelo Friendship observando via fun- 
ção Friendship.find().observe() cada novo registro através do 
evento addedAt. Este é um evento mais preciso do que o added, pois 
em seu callback ele retorna o objeto cadastrado, seu índice de registro ( 
index) e também um objeto anterior a ele ( before). Com isso, faremos 
com que o servidor emita o evento emit ('timelineIds') somente 
se o index for igual a 1, ou seja, somente se já existirem 2 registros de 
Meteor.call("followUser") na base, assim poderemos executar 


a função Friendship.timelineIds e realizar os testes em cima do 





resultado dessa função. 


var assert = require("assert"); 


suite("Friendship", function() { 
// Código: test("follow")... 

// Código: test("unfollow")... 

// Código: test("isFollowing")... 


test ("timelineIds", function(done, server, client) { 
server.eval(function() { 
Friendship.find() .observe({ 
addedAt: function(obj, index, before) { 
if (index == 1) { 
var ids = Friendship.timelineIds(this.userId) ; 
emit(’timelinelIds’, ids); 
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server.once(’timelinelIds’, function(ids) 1 
assert.equal(ids.length, 3); 
assert.equal(ids[0], "A"); 
assert.equal(ids[1], "B"); 
assert.equal(ids[3], this.userId); 
done () ; 

Hs 


client.eval(function() { 
Meteor.call("followUser", "A", function() { 
Meteor.call("followUser", "B"); 
P; 
D; 
D; 
H; 


Ok! Já temos testes suficientes para o modelo Friendship, que tal rodá- 
los para ver o que acontece? Execute o comando a seguir: 


laika tests 


Se tudo der certo, você verá o resultado dos testes semelhante à imagem: 
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ooo Gj meteor-bird — bash — 91x24 








Figura 10.1: Resultados dos testes no modelo Friendship. 


10.4 DESAFIO: TESTAR O MODELO POST 


Basicamente foram explicadas as funções necessárias do Laika e MongoDB 
suficientes para se criar testes no modelo friendship. js. 

Como lição de casa, ofereço um desafio! Você terá que criar testes 
para o modelo post.js. Desenvolva os testes em cima das 2 funções: 
Post.list e Post.publish. Para isso, desenvolva os testes no arquivo 
em tests/post. js e mãos na massa! 

Obs.: Se você estiver com problemas, participe do grupo deste livro envi- 
ando suas dúvidas através desse link: 

https://groups.google.com/forum/#!forum/livro-meteor 

Caso queira ver como fica o teste mínimo deste modelo, você pode visu- 
alizar o código-fonte desse teste através desse link: 

https://github.com/caio-ribeiro-pereira/meteor-bird/blob/master/tests/ 
post.js 

Boa sorte no desafio e continue lendo, pois ainda tem muito caminho pela 


frente! 
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Integração continua no Meteor 


No capitulo anterior, aprendemos o quão importante é criar testes. Criarmos 
na prática testes unitários nas funções dos modelos da nossa aplicação, e tudo 
isso foi apresentado explorando as funcionalidades do framework: Laika. 

Neste capítulo vamos incrementar nosso projeto, adicionando-o a um ser- 
viço de integração contínua, no qual deixaremos automática a execução dos 
testes unitários toda vez que enviarmos um novo commit para este projeto. 

O objetivo deste capítulo é apenas explicar como configurar um ambiente 
de integração contínua utilizando o Meteor. Utilizaremos como exemplo o 
serviço Travis-CI (http://travis-ci.com) , porém as dicas também servem em 
outros serviços de integração contínua. 

O Travis-CI é um serviço online gratuito apenas para repositórios públi- 
cos. Em casos de repositórios privados, é necessário desembolsar uma grana 
para tanto. 


11.1. Rodando Meteor no Travis-CI Casa do Código 





Como nosso projeto será apenas para fins educativos, vamos hospedá- 
lo em um repositório público, por exemplo, em um repositório público do 


Github (http://github.com) . 


11.1 RODANDO METEOR NO TRAVIS-CI 


Configurar uma aplicação Meteor no Travis-CI requer alguns parâmetros adi- 
cionais no arquivo .travis.yml, mas não é nada complexo. A começar, 
você vai configurá-lo como language: node js (Node.js como lingua- 
gem de programação), service: mongodb (MongoDB como serviço). Até 
aí tudo bem, não há segredo! Mas como é que o Travis-CI vai instalar o Me- 
teor, Meteorite, Laika e no final rodar os testes? 

Neste caso, será necessário incluir um script adicional dentro do campo 
before install. Este script será baixado via curl e executado via 
/bin/sh (ambiente bash script). Ele vai baixar e instalar o Meteor, Mete- 
orite, Laika e, para finalizar, executar todos os testes da aplicação. 





JAVASCRIPT E NODE.JS NO TRAVIS-CI 


Na documentação oficial do Travis-CI, existe um artigo explicando 
alguns tipos de configurações para Node.js. Entre eles, existe um mo- 
delo pronto para rodar um projeto Meteor executando testes via módulo 
Laika. Para conhecer outras configurações para ambiente JavaScript ou 
Node.js, veja este link: 

http://docs.travis-ci.com/pt-BR/user/languages/ 
javascript-with-nodejs 











Configurando o Travis-CI 


Em nosso projeto, faremos uma pequena alteração, e o resto serão apenas 
configurações no serviços Travis-CI e Github (O Travis-CI já possui signin 
direto de uma conta Github). No diretório raiz do projeto, crie o arquivo 
.«travis.yml contendo o seguinte código: 


language: node js 
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node js: 

= EO LOM 
before install: 

- "curl -L http://git.io/31-rRA | /bin/sh" 
services: 


- mongodb 


Obs.: a URL http://git.io/3l-rRA utilizada para preparar o ambiente é ape- 
nas uma URL encurtada que direciona-se para o endereço: 

https://raw.github.com/arunoda/travis-ci-laika/master/configure.sh 

E o arquivo configure. sh, internamente, visa a instalar o Meteor, Me- 
teorite e Laika no Travis-CI, ou seja, em código, este script basicamente exe- 
cuta os seguintes comandos: 


#!/bin/sh 


#configuring the system 
wget 
https: //raw.github.com/arunoda/travis-ci-laika/master/Makefile 


#install meteor 
curl https://install.meteor.com | /bin/sh 


#installing meteorite 
npm install -g meteorite 


#installing laika 
npm install -g laika 


Agora nos resta cadastrar uma conta no Github e, em seguida, no Travis- 
CI. Vocé também pode utilizar uma conta existente. 

Atenção: não entrarei em detalhes técnicos, visto que esses serviços 
com o passar do tempo podem mudar seus meios de interatividades e tam- 
bém suas interfaces visuais. 


Mas basicamente, você terá que fazer as seguintes tarefas: 


1) Criar um repositório no Github; 
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2) Fazer um commit do código-fonte do Meteor Bird para o repositório 
Github; 


3) Associar sua conta Github no Travis-CI; 


4) Adicionar o repositório do projeto no Travis-CI para ele executar os testes 
durante o build; 


Com essas tarefas feitas, o build estará preparado para ação, executando 
todos os testes unitários a cada novo commit que for enviado para o reposi- 
tório do projeto. 


ooa caio-ribeiro-pereira/meteor-bird Pa 
20) caio-ribeiro-pereira/meteor-bird | + | 











(4) a @ Grab, inc (US) ginhub.com/ca e oe JCH Q) (+ | | te) in-] Le - | 
O Disable - Q Cookies - 22 CSS = By roms - Gell images - | Information - @ Miscellaneous - / Outline ~ P Resize ~ g Tools - €> View Source ~ ff] Options - 
© ‘This reposnory Explore Gist Biog Heip @ caicrivoiro-porcira +- X P 
caio-ribeiro-pereira / meteor-bird @Unwatch> 1 te Star 0 Prok o 


Projeto Meteor Bird hitps//casadocodigo.refersion.com/d88.3525 


4 1 o 1 





E bo master ~ meteor-bird / © - 





Adiconande mongoc a laka no travin-es 


E caioriveiro-pereira pee7eesson EE 
m cont F de Puso 
M modets ja Grap 
Bs server 

P Netw 
R osgrore 
E ronsym Ad 4 : day ag 3 Senin 
EB README md 
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E README.md 


Figura 11.1: Repositório Github do Meteor Bird. 
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Figura 11.2: Rodando build no Travis-CI. 
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Figura 11.3: O build passou! 
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Preparando para producao 


Se você chegou até este capítulo e conseguiu criar uma aplicação funcional e 
com testes, meus parabéns: você aprendeu os princípios e boas práticas do 
framework Meteor! 

Neste capítulo vamos aprofundar em conhecimentos avançados, imple- 
mentando no projeto alguns detalhes importantes para deixá-lo ready for pro- 
duction. Na prática, vamos focar nas seguintes tarefas: 


* Configurar logs para monitorar alguns pontos da aplicação; 

e Habilitar cache nos arquivos estáticos; 

e Utilizar o package Fast Render para carregar templates mais rapido; 
e Otimizar leitura no MongoDB usando o package Find-Faster; 


e Trabalhar com variáveis de ambiente no projeto. 


12.1. Monitorando a aplicação através de logs Casa do Código 





12.1 MONITORANDO A APLICAÇÃO ATRAVÉS DE LOGS 


Para monitorar o sistema através de logging, primeiro temos que configurar 
os pontos importantes do projeto para registrar um log do estado dos dados. 
Atualmente, não existe nenhum package compatível com Meteor, mas sim 
diversos módulos Node.js compatíveis. Como Meteor é construído em cima 
do Node.js, também temos a possibilidade de usar não todos, mas a maioria 
dos módulos Node.js existentes no NPM (Node Package Manager). Mas por 
que nem todos os módulos Node rodam no Meteor? O Meteor é uma plata- 
forma que possui um contexto específico, que também trabalha fortemente 
integrado com banco de dados MongoDB. Exemplos de módulos Node que 
não serão compatíveis no Meteor são os módulos drivers de banco de da- 
dos: MySQL, Redis, SQL Server e outros. Outro exemplo de tipos módulos 
totalmente incompatíveis com Meteor são os web modules, responsáveis por 
criar uma aplicação web no Node.js, como Express, Connect, Sails, Geddy e 
muitos outros existente nesse link: 

http://nodewebmodules.com 

De fato, não faz o menor sentido adicionar um framework web Node.js 
no Meteor, visto que o próprio Meteor é um framework web. Por isso, nem 
todos os módulos Node.js serão compatíveis ou funcionarão corretamente 
dentro do ambiente Meteor. De qualquer forma, para os demais módulos 
compatíveis (que são muitos!), você consegue usá-los dentro de uma aplica- 


ção Meteor, e será esta a tarefa que faremos aqui. 
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MóDULOS NODE.Js, NPM E METEOR 


Módulos Node.js dentro do Meteor já são utilizados desde a versão 
0.6.x. Além da incompatibilidade com alguns módulos devido ao con- 
texto específico do Meteor, existe mais duas restrições do NPM no Me- 
teor: 


1) Os módulos Node.js somente funcionarão no server-side de uma apli- 
cação Meteor; 


2) Funções assíncronas precisam se converter para funções síncronas. 
Ao instalar o package npm, é liberada a função Meteor.sync, 
que permite executar funções assíncronas dentro de seu callback, 
convertendo-as para uma execução sincronizada. 


Você pode ler outros detalhes sobre a integração do NPM com Meteor 
no blog oficial do Meteor através deste link: 
https://www.meteor.com/blog/2013/04/04/ 
meteor-060-brand-new- distribution-system-app-packages-npm-integration 











Em vez de inventar a roda, vamos utilizar um módulo Node.js para gerar 
logs. Mas primeiro temos que habilitar o NPM em nosso projeto; para isso 


execute o comando: 


mrt add npm 


Com esse package instalado, crie no diretório raiz do projeto o arquivo 
packages. json (isso mesmo! Crieo packages. json no plural e não no 
singular, o que é muito comum em projetos Node.js.). Neste arquivo, vamos 
adicionar os módulos do NPM para utilizarmos em nossa aplicação. Para 
gerar logs, vamos usar o módulo winston, então editeo packages. json 
incluindo este módulo de acordo com código a seguir: 


{ 


"inston": "QT. 2” 
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Para que a instalação tenha efeito, apenas reinicie o servidor Meteor. Re- 
pare que, automaticamente, os módulos Node.js serão instalados quando se 
iniciar a aplicação. 





Figura 12.1: Instalando dependência NPM ao iniciar o Meteor. 


Agora vamos definir os pontos da aplicação que vão registrar logs. Você 
pode escolher qualquer local da aplicação desde que seja no lado do servidor 
para gerar um log. Para exemplificar seu uso, faremos algumas adaptações 
nos models do servidor para usá-lo. 


Para carregar qualquer módulo Node.js, utilize a função 





Meteor.require('nome do modulo") e será isso que faremos 
para iniciar este módulo. Por default, o winston gera logs no console 
da aplicação, porém, em ambiente de produção, temos que gerar logs em 
arquivos para não perder as informações. Configurá-lo para gerar arquivos 
de logs é muito simples, basta adicionar um winston.transports.File 
como transporte e informar o local que será criado os arquivos de log 
via atributo filename. Veja em código como fazer isso, editando o 


server/applications.js: 


winston = Meteor.require(’winston’) ; 

winston.add(winston.transports.File, { 
filename: ’../application.log’, 
maxsize: 1024 

H; 

Meteor.startup(function() { 
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console.log("Iniciando Meteor Bird"); 


H); 


Com winston configurado, vamos utilizá-lo para monitorar os mo- 
delos da aplicação, primeiro fazendo um refactoring apenas na função 
Post.publishem models/post.js: 


Post = new Meteor.Collection(’posts’) ; 


Post.publish = function(message) { 
var currentUser = Meteor.user(); 
var params = { 

message: message, 

time: new Date(), 

userId: currentUser. id, 

name: currentUser.profile.name 
F; 

this.insert (params) ; 


winston.info("Post.publish: " 


+; 


, params); 


Em seguida, adotaremos as mesmas convenções no código 
models/friendship.js. Para simplificar o exemplo, vamos gerar logs 





apenas nas funções Friendship.followe Friendship.unfollow. 


Friendship = new Meteor.Collection(’friendships’) ; 


Friendship.follow = function(friendId) { 
var params = { 
userId: this.userld, 
friendId: friendId 
+; 
this.insert (params) ; 
winston.info("Friendship.follow: ", params); 


+; 
Friendship.unfollow = function(friendId) { 


var params = { 
userId: this.userld, 
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friendId: friendId 
+; 
this.remove (params) ; 


winston.info("Friendship.unfollow: ", params); 


+; 


Com os logs implementados, você agora poderá visualizá- 
los via arquivo de log, que serão gerados no diretório 
-meteor/local/build/programs/application.log 


200 apeication jog 


14 

2 "o":("message":"Hi!","time";"2014-03-22718:38:19.547Z","userId";" 
Ptvb7H4PHbDZj f6CM", "name" :"Caio"," id":"3nNw6CLNIGMIQtDZ2" >, 

3 “1":{"message":"Muito legal esse Meteor Bird!!",“time":"2014- 
02-27722:55:23.4452",“userId":"Ptvb7H4PHbDZ) f6CM", “name":"Caio Ribeiro," id" 
:"yCKvoAFgeX9yRutbB">, 

4 "2":{"message":"Topz!", "time" :"2014-02-27T22:55:02.7552","userId":" 
Ptvb7H4PHbDZj f6CM", "name": "Caio Ribeiro”,"_id":"yt6yNqX7RqgifTgLp"}, 

“Level":"info", 
ost. list: ", 
:"2014-03-22719:02:11.0612" 








Figura 12.2: Arquivo de logs do sistema. 


12.2 HABILITANDO CACHE EM ARQUIVOS ESTÁTICOS 


Por default, o Meteor automatiza toda a tarefa de concatenação e minificação 
de código JavaScript e CSS quando a aplicação está em ambiente de produção. 
Isso já otimiza — e muito — a velocidade de carregamento dos arquivos está- 
ticos da aplicação, além de evitar que façamos esse trabalho de automatização 
dessas tarefas. A única coisa que teremos que implementar é um controle de 
cache estático para garantir um carregamento mais rápido da aplicação e tam- 
bém evitar múltiplas requisições no servidor em busca desses arquivos. 

Para habilitar o cache no Meteor, basta incluir o package appcache, que 
é um dos packages oficiais mantidos pelo core-team do Meteor. Execute o 
comando: 
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meteor add appcache 


Feito isso, não se preocupe com mais nada: o próprio appcache se en- 
carrega de fazer caching em todo o conteúdo estático. 


12.3 UTILIZANDO O FAST RENDER 


Nesta seção, explicarei uma dica rápida, porém poderosa, cujo impacto é au- 
mentar a velocidade da renderização dos templates. Para isso, vamos utilizar 
um recente package conhecido pelo nome Fast Render. 

Basicamente, este framework melhora o carregamento inicial da aplica- 
ção, fazendo com que a velocidade de renderização dos templates seja 10 vezes 
mais rápido, sendo comparável a um carregamento SSR (Server Side Rende- 
ring). Outro ponto forte é que ele é integrado ao Iron Router, tornando pos- 
sível configurá-lo no carregamento das rotas da aplicação. 


Instale-o através do comando: 


mrt add fast-render 


Como nossa aplicação esta totalmente orientada às rotas, vamos apenas 
incluir um simples parâmetro ( fastRender: true) nas rotas principais 
'home' e "user", visto que elas são as únicas rotas que carregam templates. 
Edite o arquivo client /lib/routes. js e faça as seguintes alterações: 


Router.map(function() { 
this.route(’home’, { 
path: ’/’, 
before: function() { 
var _id = Meteor.userId(); 
this.subscribe("posts", _id); 
this.subscribe("friendship", _id); 
+, 
data: function() { 
var _id = Meteor.userId(); 
return { 
posts: Post.find({}), 
followers: Friendship.followers(_id), 
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followings: Friendship.followings( id) 


} 
}, 
fastRender: true 


H); 


this.route(’user’, { 
path: ’/user/:_id’, 
before: function() { 
var _id = this.params. id; 
this.subscribe("posts", id); 
this.subscribe("friendship", id); 
this.subscribe("isFollowing", id); 
this.subscribe("user", id); 
>, 
data: function() { 
var _id = this.params. id; 
var isFollowing = Friendship.isFollowing(. id); 
Session.set(’currentUserld’, id); 
Session.set(’isFollowing’, isFollowing) ; 
return { 
posts: Post.find({}), 
user: Meteor.users.findOne({_id: _id}), 
followers: Friendship.followers(_id), 
followings: Friendship. followings (_id) 


} 

Fs 

fastRender: true 
H; 
F); 


Com isso, já teremos uma grande melhoria visível aos usuários: um au- 
mento na velocidade do carregamento dos templates. 
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12.4 OTIMIZANDO CONSULTAS NO MONGODB com 
FIND-FASTER 


Do mesmo criador do FastRender (o Arunoda Susiripala - @arunoda), re- 
centemente ele lançou um package extremamente útil, que visa diminuir o 
tempo de leitura no MongoDB além de reduzir o uso de CPU do servidor. 
Como funciona? O driver MongoDB utilizado pelo Meteor esta constante- 
mente convertendo objetos BSON (formato de objetos do MongoDB seme- 
lhante ao JSON do JavaScript) para objetos JSON. Esta tarefa consome muito 
a CPU, principalmente quando sua aplicação realizar múltiplas leituras em 
um mesmo registro. Neste caso o Find-Faster entra em ação, simplesmente 
fazendo caching desses objetos, evitando que essas leituras sejam realizadas 
no MongoDB. 


Para instalá-lo execute o comando: 


mrt add find-faster 


Após sua instalação, basta substituir as funções finde findOne do 
MongoDB para as respectivas funções do Find-Faster que são findFaster 
e findOneFaster. Faremos essa pequena modificação nos dois modelos. 
Então edite o models/post. js atualizando a função Post . list. 


Post = new Meteor.Collection(’posts’) ; 
// Função: Post .publish... 


Post.list = function(userlds) { 
return this.findFaster( 
{userId: {"$in": userIds}}, 
(sort: (time: -1, name: 1}} 
); 

F3 


Em seguida edite o models/friendship.js e atualize as funções: 


isFollowing, timelineIdse followersAndFollowings: 





Friendship = new Meteor.Collection(’friendships’) ; 
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// Função: Post.follow... 
// Função: Post.unfollow... 


Friendship.isFollowing = function(friendId) { 
return this.findOneFaster ({ 

userId: this.userld, 

friendId: friendId 

H; 
F; 


Friendship.timelineIds = function (userId) { 
var timelinelds = this.findFaster({ 
userId: userId 
}).map(function(f) { 
return f.friendId; 
H; 
timelineIds .push (userId); 
return timelinelds; 


+; 


Friendship. followersAndFollowings = function( id) { 
return this.findFaster ({ 

gor: [{userId: id), {friendId: _id}] 

4); 

>; 


// Função: Post.followings... 
// Função: Post.followers... 


12.5 CONFIGURANDO VARIÁVEIS DE AMBIENTE 


Por default, o Meteor reconhece e utiliza algumas variáveis de ambiente, que 
são variáveis chaves, responsáveis por fazer a aplicação utilizar um serviço 
externo do MongoDB, utilizar um domínio próprio, e também uma porta da 
rede diferente da porta padrão. Essas variáveis, respectivamente, se chamam 
MONGO URL e ROOT URL (em ROOT URL é definido o dominio + porta da 
aplicação). 

Você mesmo pode testar agora em seu ambiente de desenvolvimento, é 
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muito fácil. Primeiro, se estiver com a aplicação rodando, pare o servidor e, 
em seguida, inicie-o utilizando o comando: 


ROOT_URL=localhost:5000 meteor 


Repare que dessa vez a aplicação esta rodando no endereço: http:// 
localhost:5000 

Este foi apenas um exemplo de como configurar um ambiente no Meteor. 
É possível utilizar customizações mais detalhadas através da variável global 
Meteor.settings. 

Uma boa prática que podemos fazer agora é extrair as cha- 
ves appId e secret do Facebook, que usamos através da função 
ServiceConfiguration.configurations.insert. Para fazer essa 
extração, primeiro crie o arquivo config/settings. json. Neste arquivo, 
tenha o hábito de manter as importantes chaves e contas de serviços externos 
da aplicação, como por exemplo as chaves da autenticação via Facebook: 


{ 
"FB_SERVICE": "facebook", 
"FB_APPID": "INCLUIR APPID", 
"FB_SECRET": "INCLUIR SECRET" 
} 


Você também pode definir variáveis públicas que são expostas no client- 
side da aplicação. Para isto, basta incluir suas variáveis dentro da chave 
public, semelhante ao que podemos fazer no código a seguir: 














{ 
"RB. APPID": “INCLUIR APPID”, 
"FB. SECRET": "INCLUIR SECRET", 
“oublic": + 
"FB SERVICE": "facebook" 
} 
} 
Dessa forma, a variável FB SERVICE está visível tanto no servidor como 
no cliente. 
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eee Meteor Bird Cal 
{3 Meteor Bird + 
(4): localhost: 3000 e | (BX coogle Q) |B} [tr] (a>) Let 
© Disable + $ Cookies + 7: CSS ~ jj Forms ~ ES Images + f Information ~ @ Miscellaneous ~ 4 Outline + # Resize ~ Tools + 

Meteor Bird Caio - 

Calo novo post 

Topz! 

Seguidores: 0 últimos posts 

Seguindo: 0 

ola! 

sw < > = || Console» | HTML CSS Script DOM Net Cookies 2 seo 


lê Clear Persist Profile all (ES) Warnings Info Debug Info |Meteor.settings. public] 
Object { FB SERVICE=" facebook” } 


R 


Variáveis públicas via Meteor.settings no cliente 





Run Clear Copy History e 


Figura 12.3: Usando Meteor.settings no cliente. 


Depois de definir as chaves no config/settings.json, edite o 
código server/lib/services.js para que ele acesse os atributos de 


Meteor.settings: 


ServiceConfiguration.configurations.remove((J); 
ServiceConfiguration.configurations.insert ({ 
service: Meteor.settings["FB_SERVICE"] , 
appId: Meteor.settings["FB_APPID"], 
secret: Meteor.settings["FB_SECRET"] 
H; 


Agora toda vez que levantar o servidor Meteor, será necessário rodar o 
comando: 


mrt --settings config/settings.json 
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COMO MANTER SEGURO O ARQUIVO SETTINGS.JSON? 


Manter a boa prática de guardar todas as chaves e senhas no 
settings. json garante sua centralização em um único lugar e faci- 
lita a gestão dessas informações importantes da aplicação. 

Tome muito cuidado com esse arquivo! Evite deixá-lo exposto em 
ambientes públicos e, se possível, crie este arquivo no próprio servidor 
de produção para que somente a aplicação faça uso deste arquivo. 

Assim você evita, por exemplo, enviar este arquivo através de um com- 
mit para seu repositório público do Github. Afinal, um repositório pú- 
blico com essas informações facilita para qualquer usuário mal intenci- 


onado invadir e manipular o seu sistema. 











Com todas essas alterações feitas e rodando com sucesso, já temos uma 
aplicação que, além de funcional, já está preparada para ser enviada para um 
serviço de hospedagem em ambiente de produção. No próximo capítulo serão 
apresentadas algumas dicas para hospedar sua aplicação nas nuvens. 


129 


CAPITULO 13 


Hospedando uma aplicação 
Meteor 


Parabéns! Se vocé sobreviveu até aqui, considere-se um vencedor! Afinal, 
caso não tenha percebido, você já desenvolveu seu primeiro projeto utilizando 
a tecnologia Meteor. 

Para fechar com chave de ouro, neste capítulo vamos aprender algumas 
dicas sobre como empacotar um projeto Meteor para enviá-lo para um ser- 
viço de hospedagem nas nuvens. 

No capítulo 2.6, foi apresentado como hospedar uma aplicação nos ser- 
vidores gratuitos no subdomínio do meteor.com. O ambiente oferecido 
por eles é recomendado apenas para pequenas aplicações ou para hospedar 
versões betas, pois essas máquinas possuem um processamento muito fraco. 


Na maioria dos casos, o recomendado é colocar nossa aplicação em servi- 


13.1. Convertendo Meteor para Node.js com Demeteorizer Casa do Código 





dores mais potentes, geralmente pagando por servicos dedicados, como por 
exemplo, a utilização de serviços nas nuvens que ofereça servidores para ro- 
dar aplicações Node.js e MongoDB (afinal, o Meteor é constituído por essas 
duas tecnologias). 

Não entraremos em detalhes sobre como utilizar tecnicamente um ser- 
viço cloud e muito menos recomendarei qual é o melhor serviço para se hos- 
pedar uma aplicação Meteor. Porém, serão listados no final deste capítulo, os 
principais serviços compatíveis com Meteor. 


13.1 CONVERTENDO METEOR PARA NODE.JS COM DE- 
METEORIZER 


Algo muito interessante do Meteor é que temos a liberdade de hospedá-lo em 
qualquer serviço com suporte a Node.js e MongoDB. 

Atualmente, é comum encontrar serviços com suporte a aplicações 
Node.js, o difícil é achar um serviço que traga um jeito fácil de fazer deploy 
em uma aplicação Meteor. 

Para este caso, podemos converter um projeto Meteor para Node.js utili- 
zando uma ferramenta chamada Demeteorizer. 


Para instalá-la, basta rodar o comando: 


npm install -g demeteorizer 


Com isso, habilitamos no terminal um novo comando: demeteorizer. 

Se você já possui um serviço de host compatível com Node.js, simples- 
mente configure as varíaveis de ambiente MONGO. URL e ROOT URL, de 
acordo com os endereços disponibilizados pelo próprio serviço de hospeda- 
gem. Se estiver com dúvidas, veja a documentação do serviço ou peça ajuda 
à sua equipe de suporte. 

Com as variáveis de ambiente configuradas corretamente no ambiente de 
produção, execute na raiz do projeto o comando demeteorizer. Se não 
surgir problemas, o resultado será semelhante à imagem a seguir: 
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200 Gib meteor-bird — bash — 103x27. 





Figura 13.1: Rodando Demeteorizer. 


Uma pasta com nome .demeteorized será gerada com todo o código- 
fonte do projeto em versão Node.js. Caso queria rodar a aplicação em sua 
máquina para conferir se a versão Node.js esta funcionando, basta rodar os 
seguintes comandos: 


cd ./demeteorized 
npm install 
node main.js 


Com essas dicas realizadas corretamente, basta enviar todo o conteúdo do 
diretório .demeteorized para o serviço de hospedagem e, por fim, iniciar 
o servidor Node.js no ambiente de produção, através do comando: 


npm install 
node main.js 


13.2 ONDE HOSPEDAR UMA APLICAÇÃO METEOR? 


Há vários serviços Node.js com planos grátis e pagos. Segue uma lista com 
uma breve descrição de algumas plataformas populares: 
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Figura 13.2: Getup Cloud 


É um serviço brasileiro (isso mesmo, temos alguém por aqui construindo 
nuvem também!), sua plataforma open-source é baseada no serviço OpenShift 
(http://openshift.com) , infraestrutura Amazon e cobrança por hora e on- 
demand. Além de rodar Node.js, também suportam outras linguagens (Java, 
PHP, Ruby, Python, Perl), frameworks (Ruby on Rails, CakePHP, Django, 
Wordpress) e banco de dados (MySQL, PortgreSQL e MongoDB). O mais le- 
gal é que a plataforma oferece escalabilidade automática para as aplicações, 
criando e destruindo máquinas de acordo com o volume de conexões simul- 
tâneas, sem que você precise entender de load balance ou outros detalhes téc- 
nicos. 

A administração pode ser feita pelo CLI através do comando rhc ou pelo 
web admin do próprio site, e o deploy é feito através do git. 

As aplicações rodam em instâncias chamadas de gear, que é uma máquina 
na nuvem. Quando os gears são criados, eles recebem uma URL no formato 
http://nome app-namespace.getup.io. Eles permitem incluir certificado SSL 
e também o uso de um domínio próprio. O formato de pagamento é através 
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de paypal, cobrança por hora e em reais. 


Site oficial: http://getupcloud.com 


Figura 13.3: Modulus 


O Modulus é um serviço PaaS focado em Node.js. Um dos seus diferenci- 
ais é que ele também suporta nativamente o Meteor. De banco de dados você 
terá disponível apenas o MongoDB, e caso sua aplicação funcione em real- 
time, você poderá usar o protocolo WebSockets. Nele é possível customizar 
domínio e certificado SSL. A versão trial oferece 15$ de créditos para colo- 
car uma aplicação de pequeno porte em cima de um servidor com 64 MB de 
database e 1 GB de storage. 

Site oficial: https://modulus.io 


H| heroku 


Figura 13.4: Heroku 
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Conhecida pelos programadores Ruby, Java, Python e Closure, e princi- 
palmente o Node.js. O Heroku possui uma CLI para administração de aplica- 
ções e eles oferecem gratuitamente o domínio nome app.herokuapp.com 
ao criar uma aplicação. O mais interessante desse serviço é que eles possuem 
diversos add-ons que permitem a integração de serviços third-party em sua 
aplicação. Um exemplo disso são o add-ons que se integram com o Twitter, 
serviços da Amazon, serviços de banco de dados e cache, plugins para serviço 
de mensageria SMS e muito mais. 

Nem todos os add-ons são gratuitos, muitos deles são oferecidos como 
serviços adicionais a serem pagos. O pagamento também é on-demand, ou 
seja, você paga pelo que usar ou paga pelo add-on que instalar. 

O deploy é efetuado através do git e toda a administração da aplicação 
pode ser feita tanto pelo seu web admin como pelo seu CLI, via comando 
heroku. 


Site oficial: http://heroku.com 


nodeyitsu 


Intelligent, scalable Node.js clouds. 
Host applications. Keep them up. 


Figura 13.5: Nodejitsu 


Com a proposta de um serviço de hospedagem em nuvem, o Nodejitsu 
traz consigo diversos módulos para desenvolver aplicações Node.js em sua 
plataforma. Esta é uma plataforma 100% Node.js que permite tanto a hos- 
pedagem de aplicações web, como a hospedagem de módulos privados para 
Node.js. Possui uma documentação bastante clara e didática sobre sua API e 
oferece gratuitamente um domínio para sua aplicação através do subdomínio 
nome app.nodejitsu.com. Além disso, também possível o redireciona- 
mento de sua aplicação para um domínio próprio. 

Eles oferecem suporte ao WebSockets, suporte aos banco de dados Redis, 
CouchDB e MongoDB. Toda gestão de uma aplicação e deploy é feita através 


136 


Casa do Código Capítulo 13. Hospedando uma aplicação Meteor 





do seu próprio CLI, que é o comando jitsu. Este é um serviço cloud total- 
mente pago e dedicado inteiramente para o Node.js — não oferece nenhum 
plano gratuito. 


Site oficial: https://www.nodejitsu.com 
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Como organizar um projeto 
Meteor 


14.1 (CONVENÇÕES DE DIRETÓRIOS E ARQUIVOS 


Algo muito interessante do Meteor é como ele estrutura e organiza seus códi- 
gos, ou seja, suas convenções de diretórios que, quando bem utilizadas, fazem 
com que os módulos sejam carregados corretamente em seus respectivos con- 
textos. Dominar esses conceitos o poupará de futuros problemas em relação 
a módulos que não executam corretamente em seu projeto. 

Recomendo que entenda o significado de cada diretório e também en- 
tenda sobre que tipo de módulo se deve criar neles. Veja a seguir as principais 
convenções de nomes de diretórios e arquivos: 


e lib: inclua bibliotecas que serão carregadas tanto no cliente como no 
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servidor. Um bom exemplo são códigos de regras de negócio compar- 
tilháveis entre cliente e servidor. 


lib/environment . js: Javascript de configurações gerais sobre am- 
biente. 


lib/methods. js: definições de rotinas para o Meteor.method. 


lib/external: bibliotecas externas de outros autores, exemplo: plu- 
gins do jQuery. 


models: definições de modelos que representarão collections do Mon- 
goDB. 


client/lib: códigos específicos para o cliente. Todas essas libs serão 
carregadas primeiro, ou seja, antes dos demais códigos dentro da pasta 
client. 


client/lib/environment.js: configurações de pacotes para o 





cliente. 








client/lib/helpers: pasta dedicada para helpers e events dos 
templates. 


client/application. js: código de inicialização no cliente; geral- 
mente, utilizam-se funções de subscriptions ou rotinas internas a serem 
executadas como callback da função Meteor.startup. 


client/index.html: HTML principal. 


client/index. js: Javascript principal que carrega primeiro no load 
da página. Ele também pode ser chamado de main. js. 





client/views/nome_do_template.html: template HTML 





(mude nome_do_template para o nome real do template). 








client/views/nome_do_template.js: código Javascript para o 





respectivo template (mude nome_do_template para o nome real do 
template). 
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e client/views/nome do sub template: você também pode 
criar subtemplates, geralmente conhecidos como partials, e são trechos 
de templates utilizados em um outro template. 


e client /stylesheets: diretório CSS, no qual você pode colocar có- 
digo CSS, Less ou Stylus, e todos eles são automaticamente compilados 
e minificados. 


e client/stylesheets/application.styl: caso trabalhe com 
CSS modular, recomendo que crie este arquivo e, dentro dele, insira 
os @import de seus módulos do Stylus. 


e client /stylesheets/application.less: segue o mesmo con- 
ceito da dica anterior, mas é para a utilização do compilador Less. 





* server/application. js: código de inicialização no servidor; ge- 
ralmente, utilizam-se funções a serem executadas como callback da 
função Meteor.startup. 


e server/publications.js: definições de rotinas para o 





Meteor.publish. 


e server/lib/environment. js: configurações de pacotes para o 


servidor. 


* packages: mantém packages dependentes do projeto, que são forne- 
cidos pelo Meteorite. 


* public: pasta de arquivos estáticos. Adicione nele imagens, fontes e 
outros arquivos que serão servidos estaticamente. 


e tests: diretório para criação de testes unitários. Por default, nenhum 
código aqui é carregado ao levantar sua aplicação Meteor. Esta é uma 
pasta dedicada para frameworks de testes. 
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CAPITULO 15 


Continuando os estudos 


Obrigado por ler este livro, para mim é uma honra tê-lo como leitor! Se 
você chegou aqui é porque o livro acabou, e espero ter passado conteúdos 
de grande utilidade para seus estudos sobre o Meteor. Como tudo no mundo 
da programação esta sempre evoluindo, listarei alguns sites relevantes para 


você continuar antenado nesta tecnologia. 


Sites, blogs, fóruns e slides 


e Site oficial Meteor — http://meteor.com 
* Documentação oficial — http://docs.meteor.com 


e Documentação não-oficial —  https://github.com/oortcloud/ 


unofficial- meteor- faq 


Casa do Código 





Atmosphere — https://atmospherejs.com 

Site oficial Node.js — http://nodejs.org 

Documentação Node.js — http://nodejs.org/api 

Site oficial MongoDB — https://www.mongodb.org 
Documentação MongoDB — http://docs.mongodb.org 


SQL to MongoDB — http://docs.mongodb.org/manual/reference/ 
sql-comparison 


Google Meteor Brasil — https://groups.google.com/forum/#!forum/ 


meteor-brasil 


Facebook Meteor Brasil — https://www.facebook.com/groups/ 
meteorbrasil 


Underground WebDev — http://udgwebdev.com 
NetTuts+ — http://net.tutsplus.com 
MeteorHacks — http://meteorhacks.com 


Meteor, um overview sobre a plataforma — https://speakerdeck.com/ 
caioribeiropereira/meteor-um-overview-sobre-a-plataforma 


Blog Manuel Schoebel — http://www.manuel-schoebel.com/blog 


Eventos, screencasts, podcasts e cursos 
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EventedMind — https://www.eventedmind.com 

CodersTV — http://coderstv.com 

Meteor Podcast — http://www.meteorpodcast.com 

Meetup Meteor SP — http://www.meetup.com/Meteor-Sao- Paulo 


Ebook DiscoverMeteor — http://www.discovermeteor.com 
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* Ebook TestingMeteor — http://testingmeteor.com 


Que essas referências sejam de grande utilidade. Obrigado por ler este 


livro! 
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